自適應瀑布流
阿新 • • 發佈:2018-12-10
var data = ["img2/1.jpg","img2/3.jpg","img2/5.jpg"];
window.onload = window.onresize = function(){
var oWrap = document.getElementById("wrap");
var aItems = oWrap.children;
//取總寬度
var totalWidth = oWrap.offsetWidth;
//單個區塊寬度
var perWidth = aItems[0].offsetWidth;
//一行的列數
var cols = Math.floor(totalWidth/perWidth);
//區塊的間距
var mt = ml = 10;
//排第一行區塊的位置
//儲存每一列高度的陣列
var arrHei = [];
for(var i = 0; i < cols; i++){
aItems[i].style.top = 0;
aItems[i].style.left = (perWidth+ml)*i + "px";
arrHei.push(aItems[i].offsetHeight);
}
//排剩餘的區塊
conPos(cols);
function conPos(startNum) {
for(var i = startNum; i < aItems.length; i++){
aItems[i].style.left = aItems[getMinIndex(arrHei)].style.left;
aItems[i].style.top = arrHei[getMinIndex(arrHei)] + mt + "px";
//拍完一個之後,更新陣列
arrHei[getMinIndex(arrHei)] += aItems[i].offsetHeight + mt;
}
}
//定義一個取最小值索引的方法
function getMinIndex(arr){
var minVal = Math.min.apply(null,arr);
var minIndex = arr.indexOf(minVal);
return minIndex;
}
//實現資源持續載入
var ch = document.documentElement.clientHeight;
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(arrHei[getMinIndex(arrHei)]<ch+scrollTop){
var str = "";
data.forEach(function(item){
str += `<div><img src="${item}"></div>`;
})
oWrap.innerHTML += str;
//對新插入的資料排序
conPos(aItems.length-data.length);
}
}
}