js實現瀑佈流佈局（無限加載）
本文實例為大傢分享瞭js實現瀑佈流佈局的具體代碼，供大傢參考，具體內容如下
1.實現瀑佈流佈局思路
準備好數據之後
. 綁定滾動事件
. 判斷頁面是否到底（滾動的距離+可是區域的高度 == 最後一個元素的top）
. 加載新數據，渲染新頁面
.重新執行瀑佈流效果
2.代碼（更換圖片路徑之後可直接運行）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cont{margin: 0 auto;background: #ccc;position: relative;}
.cont::after{content: "";display: block;clear: both;}
.box{float: left;padding: 6px;}
.imgbox{border: solid 1px black;padding: 6px;border-radius: 6px;}
.imgbox img{width: 200px;display: block;}
</style>
<script src="data/data.js"></script>
<script>
// W1. 準備數據
// W2. 綁定滾動事件
// W3. 判斷頁面是否到底（滾動的距離+可是區域的高度 == 最後一個元素的top）
// W4. 加載新數據，渲染新頁面
// W5. 重新執行瀑佈流效果
onload = function(){
new Waterfall;
}
class Waterfall{
constructor(){
// 1.選擇元素
this.box = document.querySelectorAll(".box");
this.cont = document.querySelector(".cont");
this.clientH = document.documentElement.clientHeight;
this.heightArr = [];
// 2.補全佈局
this.init();
this.addEvent();
}
addEvent(){
var that = this;
onscroll = function(){
var scrollT = document.documentElement.scrollTop;
if(that.clientH + scrollT > that.scrollH-300){
that.render()
}
}
}
render(){
for(var i=0;i<data.length;i++){
var img = document.createElement("img")
img.src = data[i].src;
var imgbox = document.createElement("div")
imgbox.className = "imgbox";
var box = document.createElement("div")
box.className = "box";
imgbox.appendChild(img);
box.appendChild(imgbox);
this.cont.appendChild(box);
}
// 初始化所有
this.box = document.querySelectorAll(".box");
this.heightArr = [];
// 重新渲染瀑佈流結構
this.firstLine();
this.otherLine();
}
init(){
// 計算一行最多能放幾個，再計算最大寬度
this.clientW = document.documentElement.clientWidth;
this.boxW = this.box[0].offsetWidth;
this.maxNum = parseInt(this.clientW / this.boxW)
this.cont.style.width = this.boxW * this.maxNum + "px";
// 3. 區分第一行
this.firstLine()
// 4. 區分其他行
this.otherLine();
}
firstLine(){
// 5. 獲取所有元素的高度，存起來
for(var i=0;i<this.maxNum;i++){
this.heightArr.push(this.box[i].offsetHeight);
}
}
otherLine(){
for(var i=this.maxNum;i<this.box.length;i++){
// 6. 拿到第一行所有的高度
// console.log(this.heightArr)
// 計算最小值和最小值的索引
// var min = getMin(this.heightArr);
// var min = Math.min.apply(null,this.heightArr);
var min = Math.min(...this.heightArr);
var minIndex = this.heightArr.indexOf(min);
// console.log(minIndex);
// 7. 設置元素的定位
this.box[i].style.position = "absolute";
// 8. 設置元素的top和left
this.box[i].style.top = min + "px";
this.box[i].style.left = minIndex * this.boxW + "px";
// 9. 修改最小值
this.heightArr[minIndex] += this.box[i].offsetHeight;
}
this.scrollH = document.documentElement.scrollHeight;
}
}
function getMin(arr){
// 先對數組進行截取（為瞭深拷貝）
// 然後對截取出的新數組排序
// 找第0位
// 返回出去
return arr.slice(0).sort((a,b)=>a-b)[0];
}
</script>
</head>
<body>
<div class="cont">
<div class="box">
<div class="imgbox">
<img src="../imgs/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/10.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。