如何複製 Pinterest 的響應式 Div 堆疊佈局？

複製 Pinterest 的絕對 Div 堆疊佈局

Pinterest 獨特的 div 佈局給尋求複製其功能的程式設計師帶來了挑戰。用於根據瀏覽器調整大小動態調整佈局並防止垂直堆疊依賴的自訂 jQuery 和 CSS 讓許多人想知道如何實現類似的結果。

答案：

Pinterest佈局背後的核心原則涉及絕對定位圖釘容器、確定列寬和裝訂線大小，以及利用數組來追蹤每個圖釘容器的高度

1. 定位引腳容器：

每個接腳容器應絕對定位在父容器內。這允許各個圖釘彼此獨立放置。

2. 計算列和裝訂線尺寸：

決定圖釘容器的可用寬度和計算適合的列數。使用產生的列寬和預先定義的裝訂線大小來計算整體佈局參數。

3. 基於陣列的高度追蹤：

初始化陣列長度等於列數。當您迭代每個引腳時，確定當時哪一列的高度最短。將此高度儲存在對應的陣列元素中。

4. 引腳放置：

迭代每個引腳和：

• 將其放置在高度最短的列內（由
• 將「left」CSS屬性設定為列索引乘以列寬和間距。高度（陣列值）。響應行為和高效能引腳放置演算法的佈局。

以上是如何複製 Pinterest 的響應式 Div 堆疊佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！