CSS-тетрис стиль головоломки

Question

CLICK FOR PLAYGROUND

---

CHALLENGE

Создайте два столбца Div макет без пробелов с помощью CSS .

ЗАПУСК РАСПОЛ

Где каждая коробка просто: <div class=A1">A1</div>

DESIRED РАСПОЛ

---

Простое право?

Ну есть условия:

1. Высота каждого DIV являются переменными.
2. Число разделов является переменной.
3. Высота левой и правой колонки должна быть как можно более ровной. (Оставляя минимальное количество пробелов в пробеге).
4. Изменение HTML разрешено.
5. Дивы не нужно отображать в порядке.

JavaScript-решения приемлемы, но победитель будет гением, который может сделать это с помощью чистого CSS.

ПРИМЕЧАНИЕ: Дивы фактически сгенерированы с использованием ретранслятора .NET, но это не должно влиять на решение.

---

UPDATE

Использования гибкой модели, как отмечено Paran0a я попал на эту сцену, используя маленький скрипт, чтобы вычислить высоту .Wrap Однако трудно вычислить половину ширины correclty как последний ящик может быть огромным.

var h = 0; 
$('.Wrap > div').each(function() { 
    $(this).height(Math.random()*100);   
    h += $(this).height();   
}); 
$('.Wrap').height((h/2)); 

DEMO UPDATE

Answer 1

ли вы быть в состоянии поддерживать flex-box?

Вот небольшая демонстрация.

http://jsfiddle.net/oLzw742p/3/

$(function(){ 
 
var test = [], 
 
    num = 1, 
 
    \t \t randomNo = Math.floor(Math.random() * 8) + 2; 
 
for (i = 1; i <= randomNo; i++) { 
 
    test[i] = $('.Wrap').append('<div class="A'+(i)+'">A'+(i)+'</div>'); 
 
}; 
 
$('.Wrap > div').each(function() { 
 
    $(this).height(Math.random()*100); 
 
}); 
 
});

.Wrap { 
 
    display: flex; 
 
    width: 500px; 
 
    height: 400px; 
 
    background: #E0E0E0; 
 
    flex-direction: column; 
 
    flex-flow: column wrap; 
 
} 
 

 
.Wrap > div { 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    width: 200px; 
 
    box-sizing: border-box; 
 
    background: orange; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    margin: 10px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.Wrap div:nth-child(5n+1) {background: blue;} 
 
.Wrap div:nth-child(5n+2) {background: red;} 
 
.Wrap div:nth-child(5n+3) {background: green;} 
 
.Wrap div:nth-child(5n+4) {background: purple;} 
 
.Wrap div:nth-child(5n+5) {background: black;}

<div class="Wrap"></div>