Have child divs fill parent div with set proportions

Question

I would like to create a function with jQuery/javascript that would fill a parent div with children divs of random sizes that add up the size of the parent.

For example, 10 child divs to fill a container div with proportions 1200px x 600px

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

Answer 1

You can use a function which splits a rectangle into two subrectangles, and recursivelly split these.

• When splitting a rectangle into two parts, if it must contain an even number N of subrectangles, each part will have N/2 subrectangles.
• When splitting a rectangle into two, if it must contain an odd number of leaf subrectangles, the bigger part will have one more child than the other.

 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

The distributing will be a pain. I think there's a jQuery library out there that handles some of it... I'll poke around. This is a pretty fun problem, though.

Here's what I've go so far. It's a bit sparse.

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

The part that attempts to determine how many more components it should build is the rough part. I'm trying to keep this down to as few loops as possible:

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

Cleaned it up a bit. Check the fiddle again: 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; 
}