瀑布流布局簡而言之就是類似瀑布的布局，這么一講大家可能還是不是很明白，來來來，那現在我給大家上一個常見的實例:
瀑布流分為橫向與豎向兩種，用圖說話。
瀑布流（橫向）
瀑布流（橫向）
相信大家在百度上搜索圖片的時候，網頁圖片的布局就是這樣子的吧，當然還有一種瀑布流形式。
瀑布流（縱向）
瀑布流（縱向）
今天我們主要說說縱向瀑布流，這也是使用更為廣泛的一種。
縱向瀑布流即多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。那么規則是什么呢？
當第一排排滿足夠多的等寬圖片時（如下圖情況），自然而然地考慮到之后放置的圖片會往下面排放。
那么第六張圖片，放置在什么位置呢？是下圖的位置么？
我們通過瀑布流算法實驗得到，后面緊跟的第六張圖片的位置應該是這個位置。
為什么呢？
因為放置它之前，這一列的高度為所有列中最小，所以會放置在這個地方。
所以我們知道了，如果再繼續放置下去，第七張圖片應該是這個位置，對嗎？
通過瀑布流算法實驗得出位置正確。
看懂這個圖示應該就能理解了瀑布流的原理算法。
Js代碼：
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)
})
}
總結瀑布流布局原理
- 設置圖片寬度一致
- 根據瀏覽器寬度以及每列寬度計算出列表個數，列表默認為0
- 當圖片加載完成，所有圖片依次放置在最小的列數下面
- 父容器高度取列表數組的最大值
原創文章，作者：mjj，如若轉載，請注明出處：http://www.8874yy.com/2203.html
