怎样才能让div垂直堆叠起来？

Question

我如何使所有不同高度的div在垂直方向上捆绑在一起，同时将它们放在列中？我的网站上的每个div都是向左浮动的，右边和底部都有5px的边距，这样就有了两列，但它们的高度不同，底部的边距也不同，这取决于那一行中最高的div，我如何才能让它们像在这个Google Now页面上那样聚集在一起呢？

我已经用JSFiddle制作了我的网站的一个基本版本。

<div id="container">
    <div id="tile" class="tile-1"></div>
    <div id="tile" class="tile-2"></div>
    <div id="tile" class="tile-3"></div>
    <div id="tile" class="tile-4"></div>
    <div id="tile" class="tile-5"></div>
    <div id="tile" class="tile-6"></div>
</div>

#container {
    width: 210px;
    height: auto;
    overflow: auto;
}

#tile {
    width: 100px;
    margin: 0 5px 5px 0;
    background-color: #333;
    float: left;
}

.tile-1 { height: 100px; }
.tile-2 { height: 130px; }
.tile-3 { height: 80px; }
.tile-4 { height: 100px; }
.tile-5 { height: 110px; }
.tile-6 { height: 150px; }

我以前通过让每一列都有自己的容器来做到这一点，但是当浏览器窗口缩小时，我需要“平铺”来合并，但保持它们的顺序，从像阅读书籍一样阅读页面到像阅读较小屏幕的列表一样阅读它。

提前谢谢。哑光

Answer 1

使用其中之一

• Isotope (可能是大多数popular)
• Masonry
• jQuery.waterfall
• Wookmark jQuery plugin

查看示例，您将很容易实现这一点。