随机放置的 div，没有重叠

Question

所有 div 都按照我需要的方式放置 "randomly"，但它们偶尔会重叠。这只是一个机会问题。我怎样才能防止这种情况发生？（理想情况下我可以设置它们之间的最小距离）

我可以通过进一步开发当前的 javascript 来实现吗？我需要考虑一种完全不同的方法吗？

老实说，我不知道如何解决这个问题。任何指导将不胜感激。谢谢

html

<div id="box1" class="boxes">
<div id="text1">  Lorem Ipsum Dolor Sit Amet  </div>
</div>

<div id="box2" class="boxes">
<div id="text2">  Lorem Ipsum Dolor Sit Amet  </div>
</div>

<div id="box3" class="boxes">
<div id="text3">  Lorem Ipsum Dolor Sit Amet  </div>
</div>

<div id="box4" class="boxes">
<div id="text4">  Lorem Ipsum Dolor Sit Amet  </div>
</div>

CSS

.boxes {
    position: absolute;
}

#text1 {
    color: white;
    font-family: "Times", Times New Roman, serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    background-color: black;
}

#text2 {
    color: white;
    font-family: "Times", Times New Roman, serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    background-color: blue;
}

#text3 {
    color: white;
    font-family: "Times", Times New Roman, serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    background-color: green;
}

#text4 {
    color: white;
    font-family: "Times", Times New Roman, serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    background-color: red;
}

javascript

function setRandomPos(elements,x,dx){
    elements.each(function(){
        fixLeft=(Math.floor(Math.random()*x)*10) + dx;
        fixTop = (Math.floor(Math.random()*40)*10) + 180;
        $(this).offset({
            left: fixLeft,
            top: fixTop
            });
        });
}

setRandomPos($(".boxes"),40,40);

Fiddle

Answer 1

将您的 JavaScript 修改为以下内容。这会存储每个框的尺寸并检查每个新框是否重叠。

var boxDims = new Array();

function setRandomPos(elements,x,dx){
  elements.each(function(){
    var conflict = true;
    while (conflict) {
        fixLeft=(Math.floor(Math.random()*x)*10) + dx;
        fixTop = (Math.floor(Math.random()*40)*10) + 180;
        $(this).offset({
            left: fixLeft,
            top: fixTop
        });
        var box = {
            top: parseInt(window.getComputedStyle($(this)[0]).top),
            left: parseInt(window.getComputedStyle($(this)[0]).left),
            width: parseInt(window.getComputedStyle($(this)[0]).width),
            height: parseInt(window.getComputedStyle($(this)[0]).height)
        }
        conflict = false;
        for (var i=0;i<boxDims.length;i++) {
            if (overlap(box,boxDims[i])) {
                conflict = true;
                break;
            } else {
                conflict = false;
            }                   
        }
    }
    boxDims.push(box)
    
  });
}

function overlap(box1,box2) {
  var x1 = box1.left
  var y1 = box1.top;
  var h1 = box1.height;
  var w1 = box1.width;
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = box2.left;
  var y2 = box2.top;
  var h2 = box2.height;
  var w2 = box2.width;
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  var buf = 24;

  if (b1 + buf < y2 || y1 > b2 + buf || r1 + buf < x2 || x1 > r2 + buf) return false;
  return true;
}

setRandomPos($(".boxes"),40,40);

随机放置的 div，没有重叠

Randomly positioned divs with no overlapping

html

random

overlap