jquery-在定义的空间内散射图像，使其不重叠

您好，所有的编码器的质量和其他

我正在使用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);
    }
);

我的脚本编写技能不足以胜任这项工作，因此，如果有任何帮助，我们将不胜感激

---

谢谢

我需要查看您的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);
    }
  );

---

有没有一个原因是图像不能在移动屏幕的网格中显示，而是随机分散在其他人的网格中？当然，我对移动屏幕的网格中的图像没有意见。我想保持轻微的随机旋转。谢谢，我希望它是那么简单。如果包含HTML，它可能会起作用。但遗憾的是，事实并非如此。这是HTML:和CSS:PolaroidWrapper{width:700px；margin:0auto；}polaroidcontainer{width:700px；height:600px；}.polaroid{宽度：147px；高度：150px；背景图像：urlgallery/images/polarioid-bg.png；//宝丽来相框位置的图像：绝对；-webkit框阴影：0 0 0 10px rgba0，0，0，0.6；-moz框阴影：0 0 0 10px rgba0，0，0，0.6；}。宝丽来img{宽度：134px；高度：110px；边距：11px 0 0 0 7px；}啊，是的。每个图像都被包装在一个div中，这是一个块级元素，所以你需要在CSS中浮动它们。检查这个：非常感谢，很抱歉，我花了这么长时间才回到这个问题。你的解决方案非常有效！