瀑布流的效果 原理是初始列數top值爲0，然後將第一行的高度添加到一個新的數組裏，從第二行開始根據儲存高度這個數組來，確定最低高度列，然後向最低高度列添加展示數據；
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
position: relative;
}
img {
width: 220px;
display: block;
}
.item {
box-shadow: 2px 2px 2px #999;
position: absolute;
}
#box {
width: 816px;
position: relative;
}
#box div {
position:absolute;
width: 198px;
border: 1px solid #ddd;
margin-left: 4px;
}
</style>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script type="text/javascript">
/**
* [ 用來生成瀑布流，不足之處 沒有做dom優化在某種極端的情況下，會增加瀏覽器負擔; 待優化 由於是使用定位所以父級是沒有高度的]
* @return {[type]} [description]
*
*/
window.onload= function(){
var box = document.getElementById('box');
var items = box.getElementsByTagName('div');
var url = ''; // 請求地址;
var itemCol = 4; // 默認列的間距
var itemColGap = 2; // 默認div 上下間的距離；
var colNum = 5; // 默認列數;
var itemWidth = items[0].offsetWidth; // 獲取單個列的寬度；
// 此處數據只是測試填充；
var randomData = []; // 填充數據數組 測試;
// 產生隨機數
function randomHeight(min,max){
var min = min;
var max = max;
var randomVal = Math.ceil(Math.random()*max+min);
return randomVal;
}
// 隨機數添加到數組並去重；
function forData(){
if( randomData.length<20 ){
var randVal = randomHeight(20,100);
if(randomData.indexOf(randVal) < 0 ){
randomData.push(randVal);
}
forData();
}else {
return;
}
}
forData(); // 獲取隨機好的去重數組
// 此處數據只是測試填充；--END
// 初始化
pubuFn();
function pubuFn(){
var HeightData = []; // 各個列的初始高度;
for( var i = 0; i < items.length; i++ ){
items[i].style.height = randomData[i]+'px';
if( i < colNum){
var getHeightVal = items[i].offsetHeight; // 獲取起始高度；
items[i].style.left = i*(itemWidth+itemCol)+'px';
items[i].style.top = 0;
HeightData.push(getHeightVal);
} else {
// 獲取最低高度值;
var minVal = HeightData[0];
var z = 0;
for( let y=0;y<HeightData.length;y++ ){
if( minVal>HeightData[y] ){
minVal=HeightData[y];
z = y;
}
}
items[i].style.top = (HeightData[z]+itemColGap)+'px';
items[i].style.left = (items[z].offsetLeft-itemCol)+'px';
HeightData[z] = items[i].offsetHeight+HeightData[z]+itemColGap; // 每添加一個div 則重新計算初始列高度最低高度;
}
}
}
// 後續加載數據;
window.onscroll = function(event){
var crollTop = document.documentElement.scrollTop || window.pageYOffset;
var crollHeihgt = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var topSum = crollTop + crollHeihgt;
var offsetTopVal = items[items.length-1].offsetTop;
if( topSum > offsetTopVal){ // 如果滾動條的Top值與視口高度之和 大於 最後一張圖片的offsetTop值 那麼說明已經到最後一張圖片了；
// 此處可動態獲取數據
// todo。。。
// 循環添加數據
for( var c = 0; c<30;c++ ){
var cHei = randomHeight(0,20);
if( !randomData[cHei] ) continue;
var div = document.createElement('div');
div.style.height= randomData[cHei]+'px';
// 此處可添加需要在div 內添加的內容
// div.innerHTML = '<img src="' + datas[i] + '" alt="">';
div.innerHTML = '<p>'+c+'</p><span>'+c+'</span>';
box.appendChild(div);
}
}
pubuFn() // 每次超過閾值調用;
}
}
</script>
</html>