js实现瀑布流布局（无限加载）
程序员文章站
2022-03-09 12:53:37
本文实例为大家分享了js实现瀑布流布局的具体代码，供大家参考，具体内容如下1.实现瀑布流布局思路准备好数据之后. 绑定滚动事件. 判断页面是否到底（滚动的距离+可是区域的高度 == 最后一个元素的to...
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。