所有 div 都像我需要的那样“随机”放置,但它们偶尔会重叠。
这只是一个机会问题。我怎样才能防止这种情况发生? (理想情况下我能够设置它们之间的最小距离)
我可以通过进一步开发当前的 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 http://jsfiddle.net/lrnwdlr/rnayzkrs/