我想创建一个使用jQuery / javascript的函数,该函数将使用随机大小的子div填充父div,这些div会增加父级的大小。
例如,10个子div用于填充比例为1200px x 600px
的容器div<div class="container">
<!-- 10 child divs with random height and width. -->
</div>
答案 0 :(得分:7)
你可以使用一个将矩形分成两个子矩形的函数,并递归地分割它们。
function fillWithChilds(el, N) {
function rand(n) {
/* weight=100 means no random
weight=0 means totally random */
var weight = 50;
return Math.floor(weight*n/2+n*(100-weight)*Math.random())/100;
}
function main(N, x, y, hei, wid) {
if(N < 1) return;
if(N === 1) {
var child = document.createElement('div');
child.className = 'child';
child.style.left = x + 'px';
child.style.top = y + 'px';
child.style.width = wid + 'px';
child.style.height = hei + 'px';
el.appendChild(child);
return;
}
var halfN = Math.floor(N/2);
if(wid > hei) {
var newWid = rand(wid);
if(2*newWid > wid) halfN = N-halfN;
main(halfN, x, y, hei, newWid);
main(N-halfN, x+newWid, y, hei, wid-newWid);
} else {
var newHei = rand(hei);
if(2*newHei > hei) halfN = N-halfN;
main(halfN, x, y, newHei, wid);
main(N-halfN, x, y+newHei, hei-newHei, wid);
}
}
main(N, 0, 0, el.clientHeight, el.clientWidth);
}
fillWithChilds(document.getElementById('wrapper'), 11);
#wrapper {
background: #ccf;
position: relative;
height: 300px;
width: 400px
}
.child {
background: #cfc;
outline: 2px solid red;
position: absolute;
}
<div id="wrapper"></div>
答案 1 :(得分:0)
分发将是一种痛苦。我认为有一个jQuery库可以处理其中的一些...我会四处寻找。不过,这是一个非常有趣的问题。
这是我到目前为止所做的事情。它有点稀疏。
试图确定应该构建多少组件的部分是粗略的部分。我试图将其保持为尽可能少的循环:
var containerSize = getContainerSize();
var elementWidth = 0;
var elementHeight = 0;
// width
while (elementWidth < containerSize.x)
{
var size = generateElement();
elementWidth += size.x;
elementHeight += size.y;
}
// height, if not already full
while (elementHeight < containerSize.y)
{
var size = generateElement();
elementWidth += size.x;
elementHeight += size.y;
}
稍微清理了一下。再次检查小提琴:http://jsfiddle.net/twPQ7/2/
// determine the size of the container
var containerSize = getContainerSize();
var elementWidth = 0;
var elementHeight = 0;
// iteratively generate elements until we've hit the width of the container
while (elementWidth < containerSize.x)
{
var size = generateElement();
elementWidth += size.x;
// keep track of the tallest element.
if (size.y > elementHeight) elementHeight = size.y;
}
// iteratively generate elements until we've hit the height of the container
while (elementHeight < containerSize.y)
{
var size = generateElement();
elementHeight += size.y;
}