没有绝对位置的砌体 (Pinterest) 样式布局（如 Google+）答案

【问题标题】：Masonry (Pinterest) style layout without absolute position (like Google+)没有绝对位置的砌体 (Pinterest) 样式布局（如 Google+）
【发布时间】：2014-05-26 17:16:23
【问题描述】：

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

IMO 这种方法不适用于某些用途，例如我的卡片是可展开/可折叠的（如 Google plus post cmets），虽然这可以在 Masonry 中制作动画，但它会导致元素完全重新排列（它不会只需将元素向下推，元素从一列跳到另一列）。

我查看了 G+ 的标记，它们根据屏幕宽度动态插入 1、2 或 3 个DIVs 作为列（用于响应性），然后用元素填充这些列。这样，元素就有了它们正常的位置和行为，所以如果您需要添加、删除或展开/折叠，只需将元素插入 DOM 或更改 height 并由浏览器进行定位。

它们还负责整体高度，因此在下一次加载 Ajax 时，它会计算并分配列中的元素，使列高度以几乎相同的总高度增长（就像砌体一样）

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

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

【问题讨论】：

标签： javascript jquery html css jquery-masonry

【解决方案1】：

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

其实这就是你需要的所有样式：

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

查看：http://salvattore.com

【讨论】：