“模板法”學習類pinterest瀑布流的前端實現

如今類Pinterest網站越來越多，瀑布流越來越火，不過對我們這些前端來說，瀑布的實現方式才是我們最關心的。就目前來說，我認為主要是下面兩種：

• 固定列數的多列浮動（蘑菇街等網站），這種方式列數一般固定，呈現良好，瀏覽器解釋起來比較輕鬆
• 絕對位置與相對定位結合（pinterest等網站），動態計算資料行數，可把顯示資訊量最大化，頻繁變換顯示地區時，瀏覽器有時會比較吃力

向來對比較新的東西感興趣，今天結合一套wordpress模板學習第二種實現方式。

首先說明一下自己曾經對定位問題產生過的誤解：absolute的英文意思是絕對的意思，但在實際中是針對父級元素元素定位，如果父級元素沒有position:relative|absolute，則追至再上一個父級元素，直至相對於文檔的左上方定位，因此，千萬不能預設absolute是相對於頁面左上方進行定位，這樣會大大埋沒absolute的功能和用途。

我每次看到一種新奇的布局都會在網上找類似的wordpress模板，這樣學習時，既可以直觀地查看顯示效果，也可以修改代碼後，看效果，屢試不爽，呵呵。今天找的這套wordpress模板名稱叫imbalance-2（文章末尾有），它利了jQuery的Masonry外掛程式來實現瀑布流，Masonry是一個基於jQuery的頁面配置外掛程式。先來看看輸出到前台的代碼吧

 

資料區塊中的style是由javascript動態產生的，這也說明，瀏覽器在得到頁面中的各個元素的大小以後，依次取容器中的所有資料區塊，先尋找當前高度最小的某列，之後根據列序號，確定資料區塊的left，top值，left 為所在列的序號乘以列寬，top 為所在列的當前高度，最後更新所在列的當前高度加上這個資料區塊元素的高度，至此，插入一個元素結束，然後依次再把所有需要顯示的資料區塊排列整齊。當然，這個過程是由masonry內部完成的。

還有一個重要的部分是載入資料，當使用者需要瀑布向下流動的時候，就需要對更多的資料區塊實現非同步載入並重新布局。載入的觸發事件可是滾動到頁面底部，也可是點擊載入按鈕（本模板採用的方式）等等。當資料載入時，資料區塊照上述過程呈現，資料顯示地區#boxes就會重新計算高度。

用wordpress的園友們可以一起研究一下這種瀑布流，這可能是目前比較好的瀑布流了。說了半天，從這裡看看效果吧，還有imbalance-2的。