Javascript 如何对齐具有不同高度的div？

我需要一个Javascript代码来在下面的模型中附加新的DIV。我将使用默认的排序方式，比如float left，这些项目是以水平方式排序的。请帮帮我

<div id="maincontainer">

<div style="height:100px;width:150px; float:left; border:1px solid red; margin:5px;">smallest</div>
<div style="height:200px;width:150px; float:left; border:1px solid red; margin:5px;">largest</div>
<div style="height:150px;width:150px; float:left; border:1px solid red; margin:5px;">middle</div>
<div style="height:100px;width:150px; float:left; border:1px solid red; margin:5px;">middle2</div>
<div style="height:190px;width:150px; float:left; border:1px solid red; margin:5px;">middle3</div>
<div style="height:160px;width:150px; float:left; border:1px solid red; margin:5px;">middle4</div>

</div>

最小的
最大的
中间的
中间2
中间3
米德尔4

$（'div'）.sort（函数（a，b）{
返回$（a）.height（）>$（b）.height（）？1:-1；
}).附于（“主体”）；

我得到的输出是

我需要这样

---

您可以创建3个或3个需要固定宽度的列，并在此不带浮动的列中放置块

例如：

<div id="first_col">
  <div class="block">
    content
  </div>
  <div class="block">
    content2
  </div>
</div>

<div id="second_col">
  <div class="block">
    content
  </div>
  <div class="block">
    content2
  </div>
</div>

<div id="last_col">
  <div class="block">
    content
  </div>
  <div class="block">
    content2
  </div>
</div>

内容
内容2
内容
内容2
内容
内容2

---

JS将新块添加到具有类的div中，其中高度最小。

如果jQuery是一个选项，请尝试