javascript - 一个 CSS 俄罗斯方 block 风格的谜题

Question

CLICK FOR PLAYGROUND

---

挑战

使用 CSS 创建一个没有任何空格的两列 div 布局。

开始布局

其中每个框只是:<div class=A1">A1</div>

所需布局

---

简单吧？

好吧，有条件:

1. 每个 div 的高度是可变的。
2. div 的数量是可变的。
3. 左右栏的高度应尽可能相等。 (保留最少量的尾随空格)。
4. 允许更改 HTML。
5. div不需要按顺序显示。

JavaScript 解决方案是可以接受的，但获胜者将是能够使用纯 CSS 实现此目的的天才。

注意:div 实际上是使用 .NET 转发器生成的，但这不应该影响解决方案。

---

更新

使用 Paran0a 指出的 flex 模型我已经到了这个阶段，使用一个小脚本来计算 .Wrap 的高度。然而，由于最后一个框可能很大，所以很难正确计算一半的宽度。

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,
   		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>