我最近一直在思考如何解决一个网页设计问题，但是到目前为止，我还没有想出任何优雅的解决方案。
简要概括设计，有3列容器，容器的高度不同（动态生成），但宽度相同（流式）。它们需要按照数字顺序从左到右排列；即第一行为1-2-3，第二行为4-5-6，以此类推。
现在，让我十分困扰的是如何使这些容器之间没有太多不必要的“垂直间距”而整齐地排列。我创建了以下模拟代码（也可以在代码块下面的JSFiddle中找到）来说明：
HTML
<div class="wrapper" id="wrapper">
<div class="container small" id="container_1">1</div>
<div class="container large" id="container_2">2</div>
<div class="container small" id="container_3">3</div>
<div class="container medium" id="container_4">4</div>
<div class="container small" id="container_5">5</div>
<div class="container medium" id="container_6">6</div>
<div class="container large" id="container_7">7</div>
<div class="container medium" id="container_8">8</div>
<div class="container large" id="container_9">9</div>
<div class="clearfix"></div>
</div>
CSS
.wrapper {
width: 100%;
padding: 5%;
}
.clearfix {
clear: both;
}
.container {
display: block;
float: left;
width: 25%;
margin: 2.5%;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.small {
height: 100px;
background: red;
}
.medium {
height: 150px;
background: green;
}
.large {
height: 200px;
background: blue;
}
JSFiddle：http://jsfiddle.net/tzikas/MYgNx/
注意：由于基于设备宽度，列布局本身最终会分解为两个/一个列，因此我在JSFiddle中包括了一个简单的“切换布局”按钮来模拟这一点。
我需要帮助弄清楚的问题如下：
- 如何消除例如“1”和“5”或“2”和“6”之间过多的垂直间距？
- 如何使“4”位于“1”下方而不是“3”下方（同时解决上一个问题）？
最好不使用任何脚本操纵DOM来解决这个问题，但如果必须使用，则mooTools是我“首选的解决方案”。