瀑布流布局是一種比較流行的網(wǎng)站頁(yè)面布局方式缺菌，比如受淘寶首頁(yè)猜你喜歡模塊等很多大型網(wǎng)站的pc端和移動(dòng)端都大量使用的一個(gè)技術(shù)汉操，它也被稱(chēng)為瀑布流式布局
首先我們看幾個(gè)關(guān)于瀑布流的布局效果!
1.png
2.jpg
從這個(gè)兩個(gè)圖可以看出來(lái)瀑布流效果是等寬元素一次擺列，后面的元素以此添加到指定位置，布局效果很隨機(jī)不固定。
那么上面說(shuō)的指定位置，什么是指定位置呢褪秀，也就是說(shuō)，當(dāng)?shù)葘挼脑嘏帕械臅r(shí)候薛训，后面添加的元素要放在所有列高度中最短的那一列媒吗，以此類(lèi)推達(dá)到瀑布流布局的效果
suanfa.png
結(jié)合瀑布流布局的思想，我們想寫(xiě)出代碼來(lái)需要完成幾個(gè)步驟
- 首先開(kāi)始書(shū)寫(xiě)css中就要固定好排列的每個(gè)元素的寬度
- 根據(jù)寬度得到需要多少列
2-1. 初始化一個(gè)數(shù)組存入每一列的高度 - 把后面的元素拆入到一列中最短的高度中
3-1.每次添加新的數(shù)組中按序排列最短的那一項(xiàng)
3-2.插入后需要修改插入列的高度
html代碼
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%
}
.waterfall {
width: 90%;
margin: 0 auto;
position: relative;
}
img{
position: absolute;
margin: 10px;
}
</style>
<div class="waterfall">
<img src="http://via.placeholder.com/100x100" alt="100*100">
<img src="http://via.placeholder.com/100x70" alt="100*70">
<img src="http://via.placeholder.com/100x150" alt="100*150">
<img src="http://via.placeholder.com/100x250" alt="100*250">
<img src="http://via.placeholder.com/100x80" alt="100*80">
<img src="http://via.placeholder.com/100x90" alt="100*90">
<img src="http://via.placeholder.com/100x120" alt="100*120">
<img src="http://via.placeholder.com/100x210" alt="100*210">
<img src="http://via.placeholder.com/100x230" alt="100*230">
<img src="http://via.placeholder.com/100x100" alt="100*100">
<img src="http://via.placeholder.com/100x70" alt="100*70">
<img src="http://via.placeholder.com/100x150" alt="100*150">
<img src="http://via.placeholder.com/100x250" alt="100*250">
<img src="http://via.placeholder.com/100x80" alt="100*80">
<img src="http://via.placeholder.com/100x90" alt="100*90">
<img src="http://via.placeholder.com/100x120" alt="100*120">
<img src="http://via.placeholder.com/100x210" alt="100*210">
<img src="http://via.placeholder.com/100x250" alt="100*250">
<img src="http://via.placeholder.com/100x80" alt="100*80">
<img src="http://via.placeholder.com/100x80" alt="100*80">
<img src="http://via.placeholder.com/100x90" alt="100*90">
<img src="http://via.placeholder.com/100x120" alt="100*120">
<img src="http://via.placeholder.com/100x210" alt="100*210">
<img src="http://via.placeholder.com/100x100" alt="100*100">
<img src="http://via.placeholder.com/100x70" alt="100*70">
<img src="http://via.placeholder.com/100x250" alt="100*250">
<img src="http://via.placeholder.com/100x210" alt="100*210">
<img src="http://via.placeholder.com/100x250" alt="100*250">
<img src="http://via.placeholder.com/100x210" alt="100*210">
<img src="http://via.placeholder.com/100x230" alt="100*230">
<img src="http://via.placeholder.com/100x100" alt="100*100">
<img src="http://via.placeholder.com/100x70" alt="100*70">
<img src="http://via.placeholder.com/100x150" alt="100*150">
<img src="http://via.placeholder.com/100x150" alt="100*150">
<img src="http://via.placeholder.com/100x230" alt="100*230">
<img src="http://via.placeholder.com/100x70" alt="100*70">
<img src="http://via.placeholder.com/100x150" alt="100*150">
<img src="http://via.placeholder.com/100x250" alt="100*250">
<img src="http://via.placeholder.com/100x80" alt="100*80">
<img src="http://via.placeholder.com/100x90" alt="100*90">
<img src="http://via.placeholder.com/100x120" alt="100*120">
<img src="http://via.placeholder.com/100x210" alt="100*210">
<img src="http://via.placeholder.com/100x250" alt="100*250">
<img src="http://via.placeholder.com/100x80" alt="100*80">
<img src="http://via.placeholder.com/100x80" alt="100*80">
<img src="http://via.placeholder.com/100x90" alt="100*90">
<img src="http://via.placeholder.com/100x120" alt="100*120">
<img src="http://via.placeholder.com/100x210" alt="100*210">
</div>
jquery代碼
//一列放多少個(gè)
var colNum
//新建數(shù)組存儲(chǔ)每列高度
var colHeightArray = []
//獲取圖片的寬度
var imgWidth = $('.waterfall img').outerWidth(true)
//列數(shù)值
colNum = Math.floor( $('.waterfall').width()/imgWidth )
for( var i = 0 ; i < colNum ; i++ ){
colHeightArray[i] = 0
}
$('.waterfall img').on('load',function(){
//初始化數(shù)組最小值為索引為0的值
var minValue = colHeightArray[0]
//初始化數(shù)組最小值為索引
var minIndex = 0
for(var i = 0 ; i < colNum ; i++ ){
if(colHeightArray[i] < minValue){
minValue = colHeightArray[i]
minIndex = i
}
}
$(this).css({
left:minIndex * imgWidth,
top:minValue
})
colHeightArray[minIndex] += $(this).outerHeight(true);
console.log(colHeightArray[minIndex])
})
