原生js开发图片瀑布流布局的懒加载效果

最新推荐文章于 2024-08-03 05:52:51 发布

GrowthHacker

最新推荐文章于 2024-08-03 05:52:51 发布

阅读量1.4k

点赞数 1

分类专栏：前端技术知识

本文链接：https://blog.csdn.net/tinsine/article/details/76914340

版权

前端技术知识专栏收录该内容

22 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流动态加载</title>
<style>
*{
margin:0;
padding:0;
}
#container{
position:relative;
}
.box{
float:left;
padding:5px;
}
.box .box-img{
padding:5px;
border:1px solid #ccc;
box-shadow: 0 0 5 #ccc;
border-radius: 5px;
}
.box img{
width:230px;
height:auto;
transition:all 0.7s;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="box-img">
<img src="images/0.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/1.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/2.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/3.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/4.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/5.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/6.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/7.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/8.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/9.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/10.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/11.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/12.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/13.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/14.jpg"">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="images/15.jpg"">
</div>
</div>
</div>
</body>
<script>
/*当页面加载的时候*/
window.onload = function(){
//完善图片的布局
imgLocation("container","box");
//模仿数据
var imgData={"data":[{"src":"images/16.jpg"},{"src":"images/17.jpg"},{"src":"images/18.jpg"},{"src":"images/19.jpg"},{"src":"images/20.jpg"},{"src":"images/21.jpg"},{"src":"images/22.jpg"},]};
window.οnscrοll=function(){
if(checkFlag()){
var cParent=document.getElementById("container")
for(var i=0;i<imgData.data.length;i++){
var ccontent=document.createElement("div");
ccontent.className="box";
cParent.appendChild(ccontent);
var boxImg=document.createElement("div");
boxImg.className="box-img";
ccontent.appendChild(boxImg);
var img=document.createElement("img");
img.style.cssText="opacity:0;transform:scale(0)";
img.src=imgData.data[i].src;
boxImg.appendChild(img);
(function(img){//自执行程序闭包
setTimeout(function(){
img.style.cssText="opacity:1;transform:scale(1)";
},100);
})(img);
}
imgLocation("container","box")
}
}
}
function checkFlag(){
var cParent=document.getElementById("container");
var ccontent=getChildElement(cParent,"box");
//数组最后一个元素的高度距离顶部的距离
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight || document.body.clientHeight;
if(lastContentHeight<scrollTop+pageHeight){
return true;
}
}
function imgLocation(parent,content){
var cParent=document.getElementById(parent); //#container
var ccontent=getChildElement(cParent,content); //.box-img
var imgWidth= ccontent[0].offsetWidth;
var num=Math.floor(document.documentElement.clientWidth/imgWidth);//横排的个数
cParent.style.cssText="width:"+imgWidth*+num+"px;margin:0px auto";
//计算图片高度
var boxHeightArr=[];
for(i=0;i<ccontent.length;i++){
if(i<num){
boxHeightArr[i]=ccontent[i].offsetHeight;
}else{
var minHeight=getMin(boxHeightArr);//得到图片的最小公高度
var minIndex=getMinheightLocation(boxHeightArr,minHeight);
ccontent[i].style.position='absolute';
ccontent[i].style.top=minHeight+'px';
ccontent[i].style.left=ccontent[minIndex].offsetLeft+'px';
//更新当前图片留的最小高度minHeight和boxHeightArr[minIndex]的区别
boxHeightArr[minIndex]=minHeight+ccontent[i].offsetHeight;
}
}

}
//冒泡排序法找出最小高度的的图片
function getMin(arr){
var arrLength=arr.length;
for(var i=0,ret=arr[0];i<arrLength;i++){
ret=Math.min(ret,arr[i]);
}
return ret;
}
//得到最小高度图片的序列号
function getMinheightLocation(boxHeightArr,minHeight){
for(var i in boxHeightArr){
if(boxHeightArr[i]==minHeight){
return i;
}
}
}
//得到子集空间
function getChildElement(parent,content){
var contentArr=[];
var allcontent=parent.getElementsByTagName('*');
for(var i=0,l=allcontent.length;i<l;i++){
if(allcontent[i].className===content){
contentArr.push(allcontent[i]);
}
}
return contentArr;
}
</script>
</html>