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

Question

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

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

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

Answer 1

您可以使用将矩形拆分为两个子矩形的函数，然后递归拆分它们。

• 将一个矩形分成两部分时，如果它必须包含偶数 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>

Answer 2

分发会很痛苦。我认为那里有一个 jQuery 库可以处理其中的一些......我会四处寻找。不过，这是一个非常有趣的问题。

这是我到目前为止所做的。它有点稀疏。

http://jsfiddle.net/twPQ7/2/

尝试确定应该构建多少组件的部分是粗略部分。我试图将其减少到尽可能少的循环：

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; 
}