javascript - 防止随机放置的元素重叠

        $(this).css({
            position: 'absolute',
            left: Math.random() * ($('.parentcontainer').width() - $(this).width()),
            top: Math.random() * ($('.parentcontainer').height() - $(this).height())
        });

我得到了每个循环，它将在div中随机放置元素。问题在于，由于它们是绝对定位的，因此有时元素会相互重叠。无论如何，在js中可以检查位置吗？还是用边距值重写？万分感谢！

最佳答案

您可以通过几种不同的方法来实现此目的。我发现用一句话来定义问题最简单：


  新方块的位置必须与当前方块位置至少X距离


使用这句话，我们可以得出一些有关代码如何工作的简单理论。

假设所有正方形均为50x50像素，我们可以编写一些检查。

这是我们可以遵循的一些伪代码步骤：


为newSquare生成一个随机位置
将x的y和newSquare位置与所有现有正方形进行比较
如果x的y和newSquare位置都远离其他正方形，则可以放置newSquare
否则，再试一次

var container = $('#container');
var squareSize = 50;
var containerSize = 500;

for (var i = 0; i < 20; i++) {
  var foundSpace = false;

  while (!foundSpace) {
    // Generate random X and Y
    var randX = Math.floor(Math.random() * (containerSize - squareSize));
    var randY = Math.floor(Math.random() * (containerSize - squareSize));
    var hitsSquare = false;
    var squares = container.children();

    squares.each(function(index, square) {
      var square = $(square);

      // parseInt() because .css() returns a string
      var left = parseInt(square.css('left'));
      var top = parseInt(square.css('top'));

      // Check boundaries
      var hitsSquareX = Math.abs(left - randX) < squareSize;
      var hitsSquareY = Math.abs(top - randY) < squareSize;

      // Will overlap a square
      if (hitsSquareX && hitsSquareY) {
        hitsSquare = true;

        // jQuery break .each()
        return false;
      }
    });

    // If doesn't overlap any square
    if (!hitsSquare) {
      foundSpace = true;

      var newSquare = $('<div class="square">');

      newSquare.offset({
        left: randX,
        top: randY
      });

      container.append(newSquare);
    }
  }
}

#container {
  position: relative;
}

.square {
  position: absolute;
  background-color: red;
  width: 48px;
  /* border adds 2px */
  height: 48px;
  /* border adds 2px */
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>