随机放置的 div 没有重叠

Posted 2023-02-25

【中文标题】随机放置的 div 没有重叠

【英文标题】：Randomly positioned divs with no overlapping

【发布时间】：2015-02-28 05:41:10

【问题描述】：

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

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

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

html

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

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

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

<div id="box4" class="boxes">
<div id="text4">&nbsp;&nbsp;Lorem Ipsum Dolor Sit Amet&nbsp;&nbsp;</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

【问题讨论】：

没有什么神奇的方法可以阻止这种情况的发生。您必须更改 setRandomPos 元素，以便在随机放置每个元素之前，它需要检查所有其他元素的位置，并检查新的随机位置是否与其中任何一个重叠。请参阅此处了解检查两个 div 是否重叠的方法：***.com/questions/14012766/…

@HaukurHaf 即使它有效，它仍然允许他们触摸，对吧？我需要他们不要互相接触。

那么你只需要在碰撞检查中添加几个像素就可以让其中一个div看起来更大一点。

@HaukurHaf 就是这样！问题是看代码，我认为我自己无法实现。我是 js 新手……你能帮帮我吗？

【参考方案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 看起来更大一些”（用 HaukurHaf 的话来说）以防止它们彼此靠得太近？

您需要它们相距多远？您可能希望编辑您的原始帖子以使其更具体，因为现在您只询问防止重叠。

至少 24 像素，框的当前高度。这很难做到吗？因为该值将来可能会改变……是的，对此感到抱歉，我将编辑原始帖子。谢谢。

我在重叠函数中添加了可变缓冲距离buf。它设置为 24，但您应该可以更改它。警告如果你让这个缓冲区太大，程序可能会崩溃，因为 div 将无法放置。

这正是我想要的！非常感谢。 ;)