瀑布流無限加載（原生js）

原創

hiroCui

2020-02-22 15:06

<!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>

hiroCui

發佈了19 篇原創文章 · 獲贊 3 · 訪問量 4萬+

私信關注

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

瀑布流無限加載（原生js）

sm4加密工具類

關於PDF文件流的下載

瀑布流無限加載（原生js）

簡單封裝ajax

前後、左右、去掉所有的空格的正則表達式

JQuery實現input上傳圖片顯示縮略圖

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結