jQuery:随机定位的 div

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

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

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

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

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

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