什么是瀑布流

瀑布流又稱瀑布流式布局，是比較流行的一種網站頁面布局方式。視覺表現為參差不齊的多欄布局，最早采用此布局的是網站是 Pinterest，后逐漸在國內流行。

瀑布流布局效果

 

 

即多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。

那么規則是什么呢？
下面通過圖解來分析一下瀑布流的算法。

圖解瀑布流算法

當第一排排滿足夠多的等寬圖片時（如下圖情況），自然而然的考慮到之后放置的圖片會往下面排放。

 

 

那么第六張圖片，放置在什么位置呢？是下圖的位置么？

 

 

我們通過瀑布流算法實驗得到，后面緊跟的第六張圖片的位置應該是這個位置。

 

 

為什么呢？
因為放置它之前，這一列的高度為所有列中最小，所以會放置在這個地方。
所以我們知道了，如果再繼續放置下去，第七張圖片應該是這個位置，對嗎？

 

 

通過瀑布流算法實驗得出位置正確。看懂這個圖示應該就能理解了瀑布流的原理算法。

 

 

 

JS 實現代碼

這里使用了jQuery

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script> var colCount //定義列數 var colHeightArry= [] //定義列高度數組 var imgWidth = $('.waterfall img').outerWidth(true) //單張圖片的寬度 colCount = parseInt($('.waterfall').width()/imgWidth) //計算出列數 for(var i = 0 ; i < colCount; i ++){ colHeightArry[i] = 0 } //[0,0,0] $('.waterfall img').on('load',function(){ var minValue = colHeightArry[0] //定義最小的高度 var minIndex = 0 //定義最小高度的下標 for(var i = 0 ; i < colCount; i ++){ if(colHeightArry[i] < minValue){ //如果最小高度組數中的值小於最小值 minValue = colHeightArry[i] //那么認為最小高度數組中的值是真正的最小值 minIndex = i //最小下標為當前下標 } } $(this).css({ left: minIndex * imgWidth, top: minValue }) colHeightArry[minIndex] += $(this).outerHeight(true) }) //當窗口大小重置之后，重新執行 $(window).on('resize',function(){ reset() }) //當窗口加載完畢，執行瀑布流 $(window).on('load',function(){ reset() }) //定義reset函數 function reset(){ var colHeightArry= [] colCount = parseInt($('.waterfall').width()/imgWidth) for(var i = 0 ; i < colCount; i ++){ colHeightArry[i] = 0 } $('.waterfall img').each(function(){ var minValue = colHeightArry[0] var minIndex = 0 for(var i = 0 ; i < colCount; i ++){ if(colHeightArry[i] < minValue){ minValue = colHeightArry[i] minIndex = i } } $(this).css({ left: minIndex * imgWidth, top: minValue }) colHeightArry[minIndex] += $(this).outerHeight(true) }) } </script> 

 

Demo 演示

瀑布流 Demo 效果

 

總結瀑布流布局原理

• 設置圖片寬度一致
• 根據瀏覽器寬度以及每列寬度計算出列表個數，列表默認0
• 當圖片加載完成，所有圖片依次放置在最小的列數下面
• 父容器高度取列表數組的最大值

 

實戰相關

瀑布流 + 懶加載 實現新聞站
https://github.com/evenyao/waterfall-sinanews

瀑布流（waterfall），每刷新一次，展示8條記錄，

手機客戶端上多用。瀑布流是個大趨勢。

優點：簡單，直觀；

缺點：查找歷史記錄十分麻煩

 

傳統翻頁碼：

優點：可以一次翻多頁；查找歷史記錄方便。

缺點：在小屏手機上，點擊不方便。