jquery - 在定义的空间内分散图像，这样它们就不会重叠

Question

各位高素质编码员和其他人大家好！

我正在使用 jquery 脚本（作者：Marco Kuiper - www.marcofolio.net），该脚本将图像随机放置在定义的空间内。使用鼠标可以在屏幕上拖动图像，然后单击放大。

问题是，当在 iPhone 上查看页面时，图像无法拖动，因此如果任何图像重叠，则无法轻松点击和放大它们。我的想法是创建一个随机坐标数组，这些坐标至少是每个图像彼此之间的宽度，同时仍然符合封闭 div 的范围。这些图像的尺寸均相同。创建该数组后，使用它的值来定位图像。

这是放置图像的当前脚本：

        $(".polaroid").each
(function ()
    {
    var tempVal = Math.round(Math.random());
    if(tempVal == 1)
        { var rotDegrees = randomXToY(330, 360); } // rotate left
    else
        { var rotDegrees = randomXToY(0, 30); } // rotate right

    var position = $(this).parent().offset();
    var wiw = $(this).parent().width(); // width of div enclosing object
    var wih = $(this).parent().height(); // heiht of div enclosing object

    var leftpos = Math.random()*(wiw - $(this).width()) + position.left;
    var toppos = Math.random()*(wih - $(this).height()) + position.top;

    var cssObj =
        {
        'left' : leftpos,
        'top' : toppos,
        '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',  // safari only
        '-moz-transform' : 'rotate('+ rotDegrees +'deg)',  // firefox only
        'tranform' : 'rotate('+ rotDegrees +'deg)' // if CSS3 is standard
        };
    $(this).css(cssObj);
    }
);

我的脚本编写技能对此还不够，所以任何帮助将不胜感激。

谢谢！

Answer 1

我需要查看您的 HTML 和 CSS 来帮助进行网格布局，但就 javascript 而言，如果随机旋转就足够了，您只需删除有关定位的部分即可：

$(".polaroid").each
  (function ()
    {
    var tempVal = Math.round(Math.random());
    if(tempVal == 1)
        { var rotDegrees = randomXToY(330, 360); } // rotate left
    else
        { var rotDegrees = randomXToY(0, 30); } // rotate right

    var cssObj =
        {
        '-webkit-transform' : 'rotate('+ rotDegrees +'deg)',  // safari only
        '-moz-transform' : 'rotate('+ rotDegrees +'deg)',  // firefox only
        'tranform' : 'rotate('+ rotDegrees +'deg)' // if CSS3 is standard
        };
    $(this).css(cssObj);
    }
  );