Pinterest 如何實現絕對定位的動態網格佈局？

絕對Div 堆疊佈局：揭開Pinterest 的秘密

Pinterest 迷人的網格佈局吸引了許多複製開發人員的靈感，但複製其無縫的列調整和垂直堆疊提出了挑戰。根據Pinterest 聯合創始人之一的Quora 揭露，這裡深入探討了它是如何完成的：

絕對定位和自訂腳本

Pinterest 佈局中的每個div 容器絕對定位，可精確控制其位置。關鍵在於自訂 jQuery 和 CSS 腳本，該腳本協調佈局的動態行為。

計算列和裝訂線尺寸

在定位 div 之前，腳本確定列寬度和列之間的邊距或「裝訂線」。這些值會影響頁面上可以容納的列數。

使用列數組進行高度追蹤

建立一個陣列來儲存每列的高度。當計算新 div 的「頂部」位置時，腳本會識別最短的列（數組中高度值最小的列）並將 div 放置在那裡。

動態定位和高度調整

「左」位置是根據列號和列寬加上邊距計算的。 「頂部」位置由當時最短柱的高度決定。新增 div 時，腳本會更新對應列的高度值以反映新的高度。

輕量級且響應式

這種方法會產生高度響應的佈局可以有效地適應瀏覽器大小調整和不同的螢幕尺寸。儘管該腳本很複雜，但它是輕量級的，可以在 10 毫秒內處理具有大量引腳的頁面佈局。

透過了解絕對定位和自訂腳本之間複雜的相互作用，開發人員可以創建動態且靈活的佈局，類似於 Pinterest 的視覺效果吸引人的網格。

以上是Pinterest 如何實現絕對定位的動態網格佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！