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

我决定在一个项目中使用卡片用户界面，并检查了一些类似砖石的库，似乎所有这些库都使用

position:absolute

来排列元素

在我看来，这种方法在某些方面不是合适的工具，例如，我的卡片是可展开/可折叠的（如Google plus post comments），虽然可以在砖石结构中设置动画，但它会导致元素完全重新排列（它不只是向下推送元素，元素从一列跳到另一列）

我看了一下G+的标记，它们根据屏幕宽度动态插入1、2或3

DIV

s作为列（用于响应），然后用元素填充这些列。通过这种方式，元素具有其正常的位置和行为，因此如果需要添加、删除或展开/折叠元素，只需将元素插入DOM或更改高度，然后由浏览器进行定位

它们还考虑整体高度，因此在下一次Ajax加载中，它计算并分布柱中的元素，使柱高度以几乎相同的总高度增长（就像砖石一样）

他们使用任何特定的图书馆吗

---

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

我遇到了完全相同的问题，我认为萨尔瓦托正是你想要的。 它会自动创建一些列，并将所有网格元素放入右侧的列中。 样式完全由您决定，因此不需要任何

位置：绝对

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

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

请查看：