如何實現像Pinterest那樣靈活的div堆疊佈局？

如何複製Pinterest 靈活的Div 堆疊佈局

Pinterest 獨特的佈局是透過絕對定位與自訂JavaScript 和CSS 的組合實現的。透過利用絕對定位，圖釘不受相鄰列高度的限制，從而實現靈活且響應靈敏的佈局，可以無縫調整瀏覽器大小調整。

要複製此版面：

• 絕對定位圖釘容器。
• 決定列寬和邊距（裝訂線）。
• 初始化一個長度等於列數的數組，以表示每列的高度。

新增引腳時：

• 將每個引腳分配給最短的列。
• 計算左側位置為列號乘以列寬並透過裝訂線增強。
• 計算頂部位置作為最短列的高度。
• 更新數組中最短列的高度。

這種方法建立了一個動態佈局，其中引腳垂直堆疊，而不受相鄰列高度的限制。其結果是一種高效、響應式的設計，可容納不同數量的引腳，同時在不同的螢幕解析度下保持一致的使用者體驗。

以上是如何實現像Pinterest那樣靈活的div堆疊佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！