随机定位的div没有重叠 [英] Randomly positioned divs with no overlapping
本文介绍了随机定位的div没有重叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这只是一个偶然的问题。我怎样才能防止这种情况发生？ （理想情况下，我可以设置它们之间的最小距离）
我可以通过进一步开发当前的javascript来实现这一目标吗？
我需要考虑一种完全不同的方法吗？
我真的不知道如何解决这个问题。
任何指导将不胜感激。
Thanks。
html
< div id =box1class =boxes>
< div id =text1>& nbsp;& nbsp; Lorem Ipsum Dolor Sit Amet& nbsp;& nbsp;< / div>
< / div>
< div id =box2class =boxes>
< div id =text2>& nbsp;& nbsp; Lorem Ipsum Dolor Sit Amet& nbsp;< / div>
< / div>
< div id =box3class =boxes>
< div id =text3>& nbsp;& nbsp; Lorem Ipsum Dolor Sit Amet& nbsp;& nbsp;< / div>
< / div>
< div id =box4class =boxes>
< div id =text4>& nbsp;& nbsp; Lorem Ipsum Dolor Sit Amet& nbsp;& nbsp;< / div>
< / div>
css
.boxes {
position：absolute;
}
＃text1 {
颜色：白色;
font-family：Times，Times New Roman，serif;
font-size：16px;
font-weight：bold;
line-height：24px;
背景颜色：黑色;
}
＃text2 {
颜色：白色;
font-family：Times，Times New Roman，serif;
font-size：16px;
font-weight：bold;
line-height：24px;
background-color：blue;
}
＃text3 {
颜色：白色;
font-family：Times，Times New Roman，serif;
font-size：16px;
font-weight：bold;
line-height：24px;
background-color：green;
}
＃text4 {
颜色：白色;
font-family：Times，Times New Roman，serif;
font-size：16px;
font-weight：bold;
line-height：24px;
背景颜色：红色;
javascript
<$ p （Math.floor（Math.random（）* x））$ p $
function setRandomPos（elements，x，dx）{
elements.each（function（）{
fixLeft = * 10）+ dx;
fixTop =（Math.floor（Math.random（）* 40）* 10）+ 180;
$（this）.offset（{
left：fixLeft ，
top：fixTop
}）;
}）;
}
setRandomPos（$（。boxes），40,40）;
解决方案
将您的JavaScript修改为以下内容。这会存储每个盒子的尺寸，并检查每个新盒子是否有重叠。
var boxDims = new Array（）;
函数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 {
冲突= false;
}
}
}
boxDims.push（box）
}）;
}
函数重叠（box1，box2）{
var x1 = box1.left
var y1 = box2.top;
var h1 = box1.height;
var w1 = box1.width;
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = box1.left;
var y2 = box1.top;
var h2 = box1.height;
var w2 = box1.width;
var b2 = y2 + h2;
var r2 = x2 + w2;
var buf = 24;
if（b1 + buf b2 + buf || r1 + buf r2 + buf）return false;
返回true;
}
setRandomPos（$（。boxes），40,40）;
All divs are being placed "randomly" like I need them to be, but they occasionally overlap. It's just a matter of chance. How can I prevent that from happening? (Ideally I'd be able to set a minimum distance between them)
Can I achieve this by further developing the current javascript? Do I need consider a completely different approach?
I honestly don't know how to tackle this issue. Any guidance would be highly appreciated. Thanks.
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);
解决方案
Ammend your JavaScript to the following. This stores each box's dimensions and checks each new box against overlaps.
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 = box2.top;
var h1 = box1.height;
var w1 = box1.width;
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = box1.left;
var y2 = box1.top;
var h2 = box1.height;
var w2 = box1.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没有重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
