没有绝对位置的砌体（Pinterest）样式布局（例如Google+）

Question

我决定在项目中使用卡片UI，并检查了几个类似Masonry的库，似乎所有这些都使用了position: absolute用于布置元素。

IMO，此方法在某些用途上不是正确的工具，例如我的卡片可扩展/可折叠（例如Google加评论），尽管可以在砌体中进行动画处理，但会导致元素完全重新排列（这不仅是简单地推送元素，向下，元素从一列跳到另一列）。

我看了一下G +的标记，它们根据屏幕宽度（为了响应性）动态插入1、2或3个DIV作为列，然后用元素填充此列。 这样，元素便具有其正常的位置和行为，因此，如果您需要添加，删除或扩展/折叠，只需将元素插入DOM或更改height然后浏览器进行定位即可。

它们还照顾整体高度，因此在下一次Ajax加载中，它以使列高度以几乎相同的总高度增长的方式计算和分布列中的元素（就像砌体一样）

他们是否使用任何特定的库？

是否有任何以类似方式工作的响应框架/库？

Answer 1

我遇到了完全相同的问题，我想Salvattore正是您想要的。 它会自动创建一些列，并将所有网格元素放入右列。 然后，样式完全取决于您，因此不需要任何position:absolute 。

实际上，这就是您需要的所有样式：

.size-1of3 {
    width: 33.333%;
}