Question

我试图在容器内部绘制一堆div，使得每次加载页面时它们都是随机定位的，并且没有重叠。我似乎陷入了无限循环，并且在崩溃页面之前没有在Chrome中加载源代码，我无法正常调试。

这是我的代码：

    $(document).ready(function() {
      var filledAreas = new Array();

      var minX = 50;
      var maxX = $("#banner").width() - 150;
      var minY = 50;
      var maxY = $("#banner").height() - 150;

      var loops = 0;
      var loopsMax = 100;

      for(var i = 0; i < 15; i++) {
        var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
        $newDiv = $("<div class='bubble-outer'></div>").css({
          'width':'100px',
          'height':'100px',
          'background-color':color,
        });
        var randX = 0;
        var randY = 0;
        var area;
        do {
          randX = Math.floor(Math.random() * (maxX - minX + 1)) + minX;
          randY = Math.floor(Math.random() * (maxY - minY + 1)) + minY;
          var area = {
            'left': randX,
            'top': randY,
            'right': randX + 100,
            'bottom': randY + 100,
          };
        } while (loops < loopsMax && checkOverlap(area))

        filledAreas.push(area)

        $newDiv.css({
          'position':'absolute',
          'left':randX+'px',
          'top':randY+'px',
          'display':'none'
        }).delay(1000).appendTo("#banner").fadeIn(300);
      }

      console.log("Loops: " + loops);

      function checkOverlap(area) {
        for (var i = 0; i < filledAreas.length; i++) {
          var check = filledAreas[i];
          if (area.right < check.left && area.bottom < check.top && 
            check.right < area.left && check.bottom < area.top) {
            loops++;
            continue;
          } else {
            return true;
          }
          return false;
        }
      }
    });

Answer 1

既然您使用了我的算法，也可以将其作为答案发布！

与许多事情一样，欺骗比做你想做的更容易。

这样做＆＃34;正确＆＃34;方法将涉及检测碰撞，这非常棘手。

然而，这是一个欺骗它的好方法：

将区域划分为网格。每个网格方块必须至少与最大元素一样大才能正常工作。
对于每个元素，选择一个网格方块。如果尚未拍摄该网格方格，请将您的元素随机放置在该网格方格内的某处。

而且......那就是它！现在你保证永远不会有任何碰撞，它看起来很随机，因为它是：）

用于计算没有碰撞的div的随机位置的JavaScript

1 个答案: