瀑布流无限加载（原生js）

最新推荐文章于 2020-01-09 20:50:51 发布

oAh1993

最新推荐文章于 2020-01-09 20:50:51 发布

阅读量494

点赞数

分类专栏： javascript 文章标签： js 瀑布流原生js

本文链接：https://blog.csdn.net/hao1993015/article/details/79409275

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/initialize.css">
<style>
.out {
position: relative;
margin: 0 auto;
}
.in {
float: left;
}
.img {
margin: 10px;
padding: 10px;
border-radius: 10px;
border: 1px solid #666;
box-shadow: 0 0 5px #ff7ba5;
}
</style>
</head>
<body>
<div class="out">
<div class="in">
<div class="img"><img src="img/i1.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i2.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i3.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i4.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i5.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i6.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i7.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i8.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i9.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i10.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i11.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i12.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i13.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i14.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i15.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i3.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i4.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i5.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i6.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i7.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i8.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i9.jpg" alt=""></div>
</div>
<div class="in">
<div class="img"><img src="img/i10.jpg" alt=""></div>
</div>
</div>
<script>
window.onload = function () {
var data = '{"data":[{"src":"i1.jpg"},{"src":"i2.jpg"},{"src":"i3.jpg"},{"src":"i4.jpg"},{"src":"i5.jpg"},{"src":"i6.jpg"},{"src":"i7.jpg"},{"src":"i8.jpg"},{"src":"i9.jpg"},{"src":"i10.jpg"},{"src":"i11.jpg"},{"src":"i12.jpg"},{"src":"i13.jpg"},{"src":"i14.jpg"},{"src":"i15.jpg"}]}';
var out = document.getElementsByClassName('out')[0];
var inName = document.getElementsByClassName('in');
function pbl() {
var arr = [];
var winWid = document.documentElement.clientWidth;
var imgWid = inName[0].offsetWidth;
num = Math.floor(winWid / imgWid);
if(num<1) return;
out.style.width = num * imgWid + 'px';
for (var i = 0; i < inName.length; i++) {
if (i < num) {
arr.push(inName[i].offsetHeight);
inName[i].style.position = 'static';
} else {
inName[i].style.position = 'absolute';
var minArr = Math.min.apply(null, arr);
var index = arr.indexOf(minArr);
inName[i].style.top = minArr + 'px';
arr[index] += inName[i].offsetHeight;
inName[i].style.left = inName[index].offsetLeft + 'px';
}
}
}
pbl();
window.onscroll = function () {
var widH = document.documentElement.clientHeight; //获取时候的高度
var tTop = inName[inName.length - 1].offsetTop; //获取最后一张图片到顶部的距离
var hdH = document.documentElement.scrollTop||document.body.scrollTop; //获取滑动的高度
if(tTop<widH+hdH){
var jieGuo = JSON.parse(data);
for(var i=0;i<jieGuo.data.length;i++){
var div1 = document.createElement('div');
div1.className = 'in';
var div2 = document.createElement('div');
div2.className = 'img';
var img = new Image;
img.src = 'img/'+jieGuo.data[i].src;
div2.appendChild(img);
div1.appendChild(div2);
out.appendChild(div1);
}
pbl();
}
};
window.onresize = function () {
pbl();
}
};
</script>
</body>
</html>