最近給大家分享一下在項目中用原生js實現的瀑布流特效。
要實現瀑布流，先讓我們來看看他的實現步驟。
1.給div設置浮動。 float：left。
2. 計算可視寬度下，每一行能放多少個
3. 把第一排的的元素的高度，存入一個數組中， 找到裏面最小的高度，下一張圖片就是要放在最小高度下面，元素設置定位，改變top，left。高度累加。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</body>
<script>
window.onload = function(){
// 隨機生成寬度一樣， 高度不一樣的div 模擬圖片
var fragrment = document.createDocumentFragment();
for(var i=0; i< 100; i++) {
var _div = document.createElement('div');
var l = random(0,255);
var c = random(0,255);
var r = random(0, 255);
_div.style.backgroundColor = 'rgb('+l+','+c+','+r+')';
_div.style.width = 200 +'px';
_div.style.display ='inline-block';
_div.style.float = 'left';
// _div.style.position = 'absolute';
_div.style.height = random(100, 400) +'px';
fragrment.appendChild(_div);
}
document.body.appendChild(fragrment);
waterFall();
}
function random (min, max){
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
function waterFall() {
var _imgs = document.querySelectorAll('div');
let heightArr = [];
//
var columnNum = Math.floor(document.documentElement.clientWidth / _imgs[0].clientWidth);
Array.prototype.forEach.call(_imgs, function(item, index){
var height = item.clientHeight;
var width = item.clientWidth;
// 第一排默認排列， 把第一排的高度push到數組中
if (index < columnNum) {
heightArr[index] = height;
} else {
// 計算出每一列 高度最小的列， 並把 下一個元素 添加到這一列上
var min = Math.min(...heightArr);
var minIndex = heightArr.findIndex(item => item === min);
item.style.position = 'absolute';
item.style.top = min+ 'px';
item.style.left = minIndex * width + 'px';
heightArr[minIndex] += height;
}
})
}
</script>
</html>