原生js结合css3实现横向瀑布流及懒加载 实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>图片懒加载</title>
<style>
*{
margin:0;
padding:0;
}
.nav{
/*display:flex;弹性盒模型*/
}
.box{
float:left;
}
.box-img{
width:200px;
}
.box-img img{
width:200px;
}
</style>
</head>
<body>
<div class="nav" id="container">
<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>
<script>
var oParent=document.getElementById("container");
const CheckLoading=(child)=>{
const aContent=getChilds(child);
const lastTop=aContent[aContent.length-1].offsetTop;
const scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
const pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
if(scrollTop+pageHeight>lastTop){
return true;
}
}
const imgLocation=(child)=>{
//ES6
//将父级下所有符合条件的子元素全部取出
const aContent=getChilds(child);//获取子元素数组
const imgWidth=aContent[0].offsetWidth;//获取图片外边框宽度
const imgnum=~~(document.documentElement.clientWidth/imgWidth);//~~位运算，获取一行图片数量
oParent.style.cssText='width:'+imgWidth*imgnum+'px;margin:0 auto;';
//计算图片的高度
const heightArr=[];
[].map.call(aContent,(current,index)=>{
if(index<5){//超出第一行的图片
heightArr.push(current.offsetHeight);/*将图片高度存入数组*/
}
else{
//得到图片的最小高度
//es6方法：
//const minHeight=Math.min(...heightArr);
const minHeight=getMin(heightArr);
//得到最小高度图片的***
const minIndex=getMinIndex(minHeight,heightArr);
//reduce方法取最小值
/*var arr=[2,1,3,0];
var min=arr.reduce((a,b,index,arr)=>{
if(a.val>=b){
a.val=b;
a.index=index;
}
return a;
},{val:arr[0],index:0},)
console.log(min);*/
//布局图片
current.style.position='absolute';
current.style.top=minHeight+'px';
current.style.left=aContent[minIndex].offsetLeft+'px';
heightArr[minIndex]=heightArr[minIndex]+current.offsetHeight;//更新最小的高度
}
});
console.log(heightArr);
}
//将父级下所有符合条件的子元素全部取出
const getChilds=(child)=>{
const childArr=[];
const tagsAll=oParent.getElementsByTagName('*');
[].map.call(tagsAll,(current)=>{
if(current.className===child){
childArr.push(current);
}
});
return childArr;
}
window.addEventListener('load',()=>{
imgLocation('box');
const imgData=[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'}];
this.addEventListener('scroll',()=>{/*滚动条滚动事件*/
if(CheckLoading('box')){
//console.log("加载页面....");
imgData.map((current)=>{
const oDiv=document.createElement('div');
oDiv.className='box';
oParent.appendChild(oDiv);
const boxImg=document.createElement('div');
boxImg.className='box-img';
oDiv.appendChild(boxImg);
const img=new Image();
img.src='images/'+current.src;
boxImg.appendChild(img);
})
imgLocation('box');
};
})
});
//得到图片的最小高度
const getMin=(arr)=>{
const arrlength=arr.length;
for(var i=0,ret=arr[0];i<arrlength;i++){
ret=Math.min(ret,arr[i]);/*比较并返回最小值*/
}
return ret;
};
//得到最小高度图片的***
const getMinIndex=(minHeight,heightArr)=>{
for(var i in heightArr){
if(heightArr[i]==minHeight){
return i;
}
}
}
/*
瀑布流的实现思路
1.布局：
1.1 实现图片的列数和浏览器挂钩
1.2 让图片居中
2.根据每一列最小的高度来计算的
（哪一列你的高度最小，把后面要加载的数据放在最小那一列高度的下面）
2.1 计算图片的最小高度
前5个元素是不需要做最高计算（一行5张图片的情况）
3.判断滚动条滚动到底部怎么加载
滚动高度+页面高度>加载最后一张图片距离浏览器顶部的高度
*/
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>图片懒加载</title>
<style>
*{
margin:0;
padding:0;
}
.nav{
/*display:flex;弹性盒模型*/
}
.box{
float:left;
}
.box-img{
width:200px;
}
.box-img img{
width:200px;
}
</style>
</head>
<body>
<div class="nav" id="container">
<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>
<script>
var oParent=document.getElementById("container");
const CheckLoading=(child)=>{
const aContent=getChilds(child);
const lastTop=aContent[aContent.length-1].offsetTop;
const scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
const pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
if(scrollTop+pageHeight>lastTop){
return true;
}
}
const imgLocation=(child)=>{
//ES6
//将父级下所有符合条件的子元素全部取出
const aContent=getChilds(child);//获取子元素数组
const imgWidth=aContent[0].offsetWidth;//获取图片外边框宽度
const imgnum=~~(document.documentElement.clientWidth/imgWidth);//~~位运算，获取一行图片数量
oParent.style.cssText='width:'+imgWidth*imgnum+'px;margin:0 auto;';
//计算图片的高度
const heightArr=[];
[].map.call(aContent,(current,index)=>{
if(index<5){//超出第一行的图片
heightArr.push(current.offsetHeight);/*将图片高度存入数组*/
}
else{
//得到图片的最小高度
//es6方法：
//const minHeight=Math.min(...heightArr);
const minHeight=getMin(heightArr);
//得到最小高度图片的***
const minIndex=getMinIndex(minHeight,heightArr);
//reduce方法取最小值
/*var arr=[2,1,3,0];
var min=arr.reduce((a,b,index,arr)=>{
if(a.val>=b){
a.val=b;
a.index=index;
}
return a;
},{val:arr[0],index:0},)
console.log(min);*/
//布局图片
current.style.position='absolute';
current.style.top=minHeight+'px';
current.style.left=aContent[minIndex].offsetLeft+'px';
heightArr[minIndex]=heightArr[minIndex]+current.offsetHeight;//更新最小的高度
}
});
console.log(heightArr);
}
//将父级下所有符合条件的子元素全部取出
const getChilds=(child)=>{
const childArr=[];
const tagsAll=oParent.getElementsByTagName('*');
[].map.call(tagsAll,(current)=>{
if(current.className===child){
childArr.push(current);
}
});
return childArr;
}
window.addEventListener('load',()=>{
imgLocation('box');
const imgData=[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'}];
this.addEventListener('scroll',()=>{/*滚动条滚动事件*/
if(CheckLoading('box')){
//console.log("加载页面....");
imgData.map((current)=>{
const oDiv=document.createElement('div');
oDiv.className='box';
oParent.appendChild(oDiv);
const boxImg=document.createElement('div');
boxImg.className='box-img';
oDiv.appendChild(boxImg);
const img=new Image();
img.src='images/'+current.src;
boxImg.appendChild(img);
})
imgLocation('box');
};
})
});
//得到图片的最小高度
const getMin=(arr)=>{
const arrlength=arr.length;
for(var i=0,ret=arr[0];i<arrlength;i++){
ret=Math.min(ret,arr[i]);/*比较并返回最小值*/
}
return ret;
};
//得到最小高度图片的***
const getMinIndex=(minHeight,heightArr)=>{
for(var i in heightArr){
if(heightArr[i]==minHeight){
return i;
}
}
}
/*
瀑布流的实现思路
1.布局：
1.1 实现图片的列数和浏览器挂钩
1.2 让图片居中
2.根据每一列最小的高度来计算的
（哪一列你的高度最小，把后面要加载的数据放在最小那一列高度的下面）
2.1 计算图片的最小高度
前5个元素是不需要做最高计算（一行5张图片的情况）
3.判断滚动条滚动到底部怎么加载
滚动高度+页面高度>加载最后一张图片距离浏览器顶部的高度
*/
</script>
</body>
</html>
效果：