如何複製pinterest.com的絕對div堆棧佈局

104

我期待複製Pinterest.com的div佈局，具體如何調整列數以適應瀏覽器調整大小的更多/更少，並且垂直堆疊不依賴於相鄰列高度。源代碼顯示每個div都是絕對位置的。一位聯合創始人已經回答了Quora的一篇文章，聲稱這是通過定製的jQuery和CSS完成的。我希望將結果從左到右排序。任何你可以提供自己的方向將不勝感激。如何複製pinterest.com的絕對div堆棧佈局

來源

2011-08-18 chrickso

我用簡單的Jquery和CSS編寫了自己的代碼。如果您希望在調整大小時更改此屬性，只需將其包裝在函數中，然後觀察容器元素的大小調整 http://jsfiddle.net/92gxyugb/1/ –

您還可以檢查jQuery插件Masonry的這種功能。

來源

2012-02-29 22:07:16

真正令人驚歎的圖書館。現在我使用它沒有任何問題。 –

他們通過與列IDS（壞的解決方案......更好地利用類名）分開的實體，然後通過列組計算位置

來源

2011-08-18 14:56:09

+1瞭解其源代碼。 – Bojangles

對我來說這很有趣，但我認爲有更少的js計算的解決方案 –

我可以使用'display：inline-block'我想，但不同垂直高度的項目不會坐在一起。 – Bojangles

183

我寫的劇本Pinterest的。 ID與佈局無關，並用於其他與交互相關的JS。下面是它是如何工作的基礎：

事前：

絕對定位銷容器
確定列寬
確定列之間餘量（陰溝）

設置一個array：

獲取父容器的寬度;計算將適合的列數
創建一個空數組，其長度等於列數。使用此數組來存儲構建佈局時每個列的高度，例如塔1的高度通過每個銷存儲爲數組[0]

循環：

將在最短的列中的每個銷在它被添加
此刻「左：」 = ==列＃（索引數組）乘以列寬度+餘量
「top：」===當前最短列的數組高度值
最後，添加高度引腳到列高度（數組值）

結果很輕。在Chrome中，佈滿整個頁面的50多個引腳需要< 10ms。

來源

2011-08-20 01:13:27

你是怎麼計算列的高度的？如果你不知道其中物品的數量和高度，你怎麼知道應該有多高？你有可能佈置一些僞代碼來演示嗎？ –

+22

這裏有一個可靠的教程 - http：// benholland。/ javascript/how-to-build-a-site-that-works-like-pinterest/ – hollandben

anonymus用戶的反饋（在編輯隊列中找到）：奇怪的是我在jQuery中完全一樣的腳本，實際上創建一個具有1行和N列的表格，並將它們附加到從左到右優先級最短的列。即使我還添加了「最小高度差」當從左向右定位時實際跳過某一列所需的常量，這樣可以使佈局具有時間上直觀的顯示效果，而不會使高度儘可能均勻 – oers

我們發佈了一個jQuery插件，因爲我們針對Wookmark多次獲得了相同的問題。它創建了這種類型的佈局。在此處查看 - Wookmark jQuery plugin

來源

2011-12-17 12:53:32 GBKS

這個解決方案似乎加載速度比石工 –

哪個更好？ wookmark或石工？ – Ramje

我比磚石更喜歡這個，看起來更像邁克爾說的那樣。 – nerdburn

您可以使用浮動和尺寸您的div寬度使用百分比與最小寬度一起強制divs一旦達到最小寬度自動下降？它的方式，我們得到它的工作在http://www.goldtree.co.za/work

來源

2012-05-23 19:48:24

你爲什麼不試試這個簡單的JS的東西

http://vanilla-masonry.desandro.com/index.html

甚至這與jQuery和具有滾動荷載爲好。

http://masonry.desandro.com/index.html

來源

2012-05-24 12:31:41

說完看着所有的選擇，我最終實現以這種方式類似於Pinterest的佈局：

所有div是：

div.tile { 
    display: inline-block; 
    vertical-align: top; 
}

這使得他們排好位置比他們漂浮時。

然後，當頁面加載時，我遍歷JavaScript中的所有DIV以消除它們之間的差距。它在以下情況下可以工作：

DIV在身高方面差別不大。
你不介意一些輕微的違規行爲（下面的一些元素可以拉到上面）。
你不介意底線是不同的高度。

這種方法的好處 - 爲搜索引擎的HTML意義，可以禁用JavaScript /通過防火牆阻止，在HTML元素的序列相匹配的邏輯順序工作（較新的項目之前，舊的）

來源

2013-05-08 17:33:12 esp

嘿，你能告訴我你是如何計算你必須減少的偏移量的？還有，你是如何解決右側最後一個元素的問題的，因爲有一個元素稍大一點，並將它推到那裏。 –

@LukasOppermann 1）瓦片的偏移量是前一行中同一列中的瓦片的偏移量與前一行中最高瓦片的高度與同一瓦片中的瓦片的高度之差上一行中的列。看看http://dev.sheeporpig.com/news（你首先需要點擊鏈接http://dev.sheeporpig.com/sheep/3210才能訪問開發網站 - 這樣你就可以看到未壓縮和評論腳本在單獨的文件中），腳本文件stock_news.js，函數compressTiles。 – esp

@LukasOppermann 2）如果你在回答中使用CSS（特別是display：inline-block），它不會發生。只有浮動時纔會發生：離開你的div。我不使用浮動。 – esp

如何複製pinterest.com的絕對div堆棧佈局

回答

相關問題