沒有絕對位置的砌體（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%;
}