gpt4 book ai didi

javascript - 让子 div 按设定比例填充父 div

转载 作者:行者123 更新时间:2023-12-01 02:30:54 24 4
gpt4 key购买 nike

我想使用 jQuery/javascript 创建一个函数,该函数将用随机大小的子 div 填充父 div,这些子 div 将父级的大小相加。

例如,10 个子 div 填充比例为 1200px x 600px 的容器 div

<div class="container">
<!-- 10 child divs with random height and width. -->
</div>

最佳答案

您可以使用将矩形拆分为两个子矩形的函数,并递归地拆分它们。

  • 将一个矩形分成两部分时,如果它必须包含偶数 N 个子矩形,则每个部分将有 N/2 个子矩形。
  • 将一个矩形一分为二时,如果它必须包含奇数个叶子子矩形,则较大的部分将比另一个多一个子矩形。

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>

关于javascript - 让子 div 按设定比例填充父 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17606148/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com