<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>瀑布流加载</title>
<meta name="keywords" content="瀑布流 加载" />
<meta name="description" content="懒加载技术" />
<style>
*{margin: 0; padding: 0;}
#box
{
height: 300px;
width: 1100px;
margin: 50px auto;
}
#box ul li
{
width: 250px;
list-style: none;
float: left;
box-shadow: 0 0 5px #000;
margin: 7px;
padding: 5px;
}
#box ul li img
{
width: 250px;
transition: 1s;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<script src="js/jquery.js"></script>
<script>
var i=0;
//用一个数组来保存图片路径
var arr=[
{src: 'img/1.png'},
{src: 'img/2.jpg'},
{src: 'img/3.jpg'},
{src: 'img/4.jpg'},
{src: 'img/5.jpg'},
{src: 'img/6.jpg'},
{src: 'img/7.jpg'},
{src: 'img/8.jpg'},
{src: 'img/9.jpg'},
{src: 'img/10.jpg'},
{src: 'img/11.jpg'},
{src: 'img/12.jpg'},
];
function create()
{
var oImg=new Image();
oImg.src=arr[i%arr.length].src;
oImg.style.cssText='opacity: 0; transform: scale(0) ';
getList().append(oImg);//获取最小高度的li，把图片插入其中
setTimeout(function(){
oImg.style.cssText='opacity: 1; transform: scale(1)'
},100);
};
function getList()
{
var oLi=$('#box ul li');
var min=oLi.eq(0).height();
var list=oLi.eq(0);
for(var i=0;i<oLi.length;i++)
{
if(oLi.eq(i).height()<min)
{
min=oLi.eq(i).height();
list=oLi.eq(i);
}
}
return list;
};
var sum;
function upload()//定义函数来加载图片
{
if(i<12)
{
for(;i<12;i++)
{
create();
}
}
else
{
sum=i;
for(;i<sum+3;i++)
{
create();
}
}
i++;
};
upload();
var h=$(window).height();//可视区高度
$(window).scroll(function(){
var t=$(window).scrollTop();//滚动距离
var H=$(document).height();//文档高度
if(h+t+50>H)
{
upload();
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>瀑布流加载</title>
<meta name="keywords" content="瀑布流 加载" />
<meta name="description" content="懒加载技术" />
<style>
*{margin: 0; padding: 0;}
#box
{
height: 300px;
width: 1100px;
margin: 50px auto;
}
#box ul li
{
width: 250px;
list-style: none;
float: left;
box-shadow: 0 0 5px #000;
margin: 7px;
padding: 5px;
}
#box ul li img
{
width: 250px;
transition: 1s;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<script src="js/jquery.js"></script>
<script>
var i=0;
//用一个数组来保存图片路径
var arr=[
{src: 'img/1.png'},
{src: 'img/2.jpg'},
{src: 'img/3.jpg'},
{src: 'img/4.jpg'},
{src: 'img/5.jpg'},
{src: 'img/6.jpg'},
{src: 'img/7.jpg'},
{src: 'img/8.jpg'},
{src: 'img/9.jpg'},
{src: 'img/10.jpg'},
{src: 'img/11.jpg'},
{src: 'img/12.jpg'},
];
function create()
{
var oImg=new Image();
oImg.src=arr[i%arr.length].src;
oImg.style.cssText='opacity: 0; transform: scale(0) ';
getList().append(oImg);//获取最小高度的li，把图片插入其中
setTimeout(function(){
oImg.style.cssText='opacity: 1; transform: scale(1)'
},100);
};
function getList()
{
var oLi=$('#box ul li');
var min=oLi.eq(0).height();
var list=oLi.eq(0);
for(var i=0;i<oLi.length;i++)
{
if(oLi.eq(i).height()<min)
{
min=oLi.eq(i).height();
list=oLi.eq(i);
}
}
return list;
};
var sum;
function upload()//定义函数来加载图片
{
if(i<12)
{
for(;i<12;i++)
{
create();
}
}
else
{
sum=i;
for(;i<sum+3;i++)
{
create();
}
}
i++;
};
upload();
var h=$(window).height();//可视区高度
$(window).scroll(function(){
var t=$(window).scrollTop();//滚动距离
var H=$(document).height();//文档高度
if(h+t+50>H)
{
upload();
}
});
</script>
</body>
</html>
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
