Pinterest 如何透過 Div Stacking 實現響應式佈局？

Pinterest 巧妙的Div Stacking 佈局如何適應不同的瀏覽器尺寸

Pinterest 迷人的視覺佈局在其作為社交媒體的成功中發揮了重要作用媒體平台。此佈局的一個關鍵方面是列能夠調整其數量並垂直堆疊，無論相鄰列的高度如何。

幕後：自訂 jQuery 和 CSS

網站的程式碼顯示，這種佈局是使用絕對div定位實現的。然而，正如 Quora 上的聯合創始人所說，Pinterest 使用自訂的 jQuery 和 CSS 來控制佈局的行為。

版面圖

巧妙的jQuery 腳本設計，依賴以下原則：

1. 絕對定位：
2. 絕對定位：
絕對定位：
3. 列寬計算：
4. 此腳本根據父容器的大小和所需的數量計算每列的寬度
列之間的邊距：
5. 定義了一個裝訂線值，表示相鄰列之間的邊距。
高度陣列：
6. 建立了一個陣列儲存每列的高度，該高度將用於確定垂直方向堆疊。
循環引腳：
7. 新增引腳時，腳本會迭代每個引腳，將其放置在最短的列中。
設定座標：

每個圖釘的左側位置設定為其各自的列索引乘以列寬加上裝訂線。它的頂部位置對應於該實例中最短列的高度。

高度調整：

放置圖釘後，其高度將會加到陣列中所選列的高度。

• 自訂版面的好處
這個自訂版面有以下幾個優點：
響應式>響應式：
• 版面根據瀏覽器尺寸變化自動調整，提供最佳的觀看體驗。
垂直堆疊：

獨立於相鄰列的高度，引腳垂直堆疊，形成網格狀效果。 效率：腳本效率很高，減少了在頁面上佈局多個引腳所需的時間。

以上是Pinterest 如何透過 Div Stacking 實現響應式佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！