Имейте дочерние divs заполнить родительский div с установленными пропорциями

Question

Я хотел бы создать функцию с jQuery/javascript, которая заполнила бы родительский div дочерними divs случайных размеров, которые суммируют размер родителя.

Например, 10 ребенок дивы, чтобы заполнить контейнер DIV с пропорциями 1200px х 600px

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

Answer 1

Распределительный будет боль. Я думаю, что есть библиотека 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; 
} 

Answer 2

Вы можете использовать функцию, которая расщепляет прямоугольник на два прямоугольники, и recursivelly разделить их.

• При расщеплении прямоугольника на две части, если он должен содержать четное число 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>