Question

我希望在页面周围随机定位一大堆div（最终会包含图片），包含在100％内。问题是我不希望div重叠，并且所有div将根据图像的不同尺寸。
我目前拥有的方法：
（这里也是jsfiddle http://jsfiddle.net/2z4rK/）

        function randomFromTo(from, to){
            return Math.floor(Math.random() * (to - from + 1) + from);
        }

        function moveRandom() {
            var cPos = $('#block-container').offset();
            var cHeight = $('#block-container').height();
            var cWidth = $('#block-container').width();

            var pad = parseInt($('#block-container').css('padding-top').replace('px', ''));

            var bHeight = $('.block').height();
            var bWidth = $('.block').width();

            maxY = cPos.top + cHeight - bHeight - pad;
            maxX = cPos.left + cWidth - bWidth - pad;

            minY = cPos.top + pad;
            minX = cPos.left + pad;



      $('.block').each(function() {

              newY = randomFromTo(minY, maxY);
              newX = randomFromTo(minX, maxX);

        $(this).animate({
                  top: newY,
                  left: newX
                  }, 500, function() {
              });
      });
        }

moveRandom();

这没关系，但div重叠，似乎它们都必须是相同的大小。 div将由客户端动态添加，因此我需要使其完全自给自足，这是我认为当前方法失败的地方。有没有办法随机定位div？
我尝试实现的一个很好的例子：http://www.jormamueller.com

Answer 1

我不会为你编写代码，只是给你一个大纲：

为每个矩形的左上角和右下角创建坐标（将它们存储在数组或对象中），并将它们添加到坐标数组中。
在每个新矩形的生成中，检查其四个角的坐标中的任何一个是否大于任何其他矩形的左上角且是否小于右下角其他矩形的一角（所以检查是否有任何角落在任何其他矩形内）。
如果没有，请为矩形生成新的随机坐标。

如果我不清楚，你可以发表评论。

Answer 2

您链接的网站使用以下技术：

有一个网格容器div，其中包含width的浏览器窗口，并且还有relative position。
对于每张图片，都有一个div的容器absolute position。每个div都有full width和random left位置。每个top的{{1}}属性是所有前div高度的总和。

如果我是你，我会使用div标签创建一个带有空单元格的表格，然后我会将图像随机放入这些单元格中。

这可以通过将所有图像源和细节放在一个数组中并将所有单元ID放在另一个数组中来实现;然后你可以将两个数组混洗并将一个图像分配给一个随机单元格。

jQuery：随机定位的div

2 个答案: