我试图在容器中画出一堆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;
    }
  }
});