这就是我现在拥有的。它正在工作,但我想编辑随机函数,以便div(这只是一个模型,会有很多,甚至更多!)将是"均匀分布"根据浏览器的宽度,如果这是有道理的。在某种程度上,不需要水平滚动条!
I think this is a good example.点击Designer的名称(左上角),您就会明白我的意思。请注意这些文件夹如何始终使用整个窗口,无论它有多小或多大?我想模仿那种行为......我只是不知道如何去做...编辑当前的脚本?一种完全不同的方法?
任何输入都将受到高度赞赏。 感谢。
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
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);
答案 0 :(得分:1)
我以为我会分享我想出的调整和进一步的解决方案。当当前窗口内没有足够的空间时,确保父容器被扩展,因此不会发生无限循环。
http://codepen.io/Shikkediel/pen/dPOVJp?editors=011
首先通过指定的数字迭代屏幕的象限,使得随机性稍微减少。
$(window).on('load', function() {
var spread, crest, boxes = [];
var margin = 40;
var itemwidth = 50;
var itemheight = 50;
var pad = 25;
var initial = 8;
setArea($(".boxes"));
placeRandom($(".boxes"));
function setArea(items) {
var range = 0, pitch = 0, total = 0;
items.each(function() {
range = $(this).width()+2*pad;
pitch = $(this).height()+2*pad;
total = total+range*pitch;
});
spread = $(window).width();
var term = $(window).height();
var edge = total/spread;
if (term < 4*edge) crest = 4*edge;
else crest = term;
$('#boxcontainer').css({'width': spread, 'height': crest});
spread = $(window).width();
$('#boxcontainer').width(spread);
}
function placeRandom(elements) {
var iter = 0;
var horizontal = spread/2;
var vertical = crest/2;
elements.each(function() {
var object = $(this), box;
iter++;
setPosition();
function setPosition() {
if (iter <= initial) {
var quadrant = iter%4;
if (quadrant == 0) quadrant = 4;
var spaceX = Math.round(Math.random()*(horizontal-itemwidth-margin));
var spaceY = Math.round(Math.random()*(vertical-itemheight-margin));
var bufferX, bufferY;
if (quadrant == 1) {
bufferX = margin;
bufferY = margin;
}
if (quadrant == 2) {
bufferX = horizontal;
bufferY = margin;
}
if (quadrant == 3) {
bufferX = horizontal;
bufferY = vertical;
}
if (quadrant == 4) {
bufferX = margin;
bufferY = vertical;
}
fixleft = spaceX+bufferX;
fixtop = spaceY+bufferY;
object.css({top: fixtop, left: fixleft});
}
else {
fixleft = Math.round(Math.random()*($(window).width()-itemwidth-2*margin))+margin;
fixtop = Math.round(Math.random()*($(window).height()-itemheight-2*margin))+margin;
object.css({top: fixtop, left: fixleft});
}
box = {
top: fixtop,
left: fixleft,
width: object.width(),
height: object.height()
}
if (iter == 1) boxes.push(box);
else {
for (var i=0; i < boxes.length; i++) {
if (encroachOn(box, boxes[i])) setPosition();
}
}
}
boxes.push(box);
object.show();
});
}
function encroachOn(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;
return (x1 < r2+pad && r1+pad > x2 && y1 < b2+pad && b1+pad > y2);
}
});
还要添加一个用于调整大小的附加功能。
编辑 - 这是在Stackoverflow上找到的后者的一个很好的解决方案: