0

我希望在页面周围随机放置整个加载的 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

4

2 回答 2

0

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

  • 为每个矩形的左上角和右下角创建坐标（将它们存储在数组或对象中），并将它们添加到坐标数组中。

  • 在新矩形的每一代中，检查其四个角的坐标是否大于其他任何矩形的左上角并且是否小于其他矩形的右下角（因此检查是否有任何角位于任何其他矩形）。

  • 如果不是，则为矩形生成新的随机坐标。

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

于 2013-03-09T00:25:45.883 回答
0

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

  • 有一个网格容器div，它有width浏览器窗口，也有relative position.
  • 对于每个图像，都有一个div带有absolute position. 每个div人都有full width一个random left职位。top每个属性div是所有前 div 高度的总和。

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

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

于 2013-03-09T00:48:35.593 回答