<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<style>
#box{
width:1000px;
overflow: hidden;/*清除浮动影响*/
margin:0 auto;
}
#box ul{
width:300px;/*只设置宽度，自适应高度*/
border: 1px solid #000;
float: left;/*浮动布局*/
margin: 10px;
}
#box ul li{
width:280px;
margin: 10px;
background: #ff9ca1;
}
</style>
<script>
//定义函数，封装一个创建随机高度的li元素(替代图片)
function createLi(){
var oLi=document.createElement('li');//创建li元素
oLi.style.height=parseInt(Math.random()*(500-50)+50)+'px';//li的高度随机
return oLi;//函数返回值为li
}
//当页面加载完后，执行行数
window.onload=function(){
//获取容器
var oBox=document.getElementById('box');
//获取容器的每一列的ul
var aUl=oBox.children;
//定义函数，封装一个预加载20次的图片
function create20(){
//循环20次
for(var i=0; i<20; i++){
//每执行一次创建一个li
var oLi=createLi();
//把所有的ul丢进数组里面
// 创建一个空数组
var arr=[];
//遍历所有的ul
for(var k=0; k<aUl.length; k++){
//依次把ul添加到数组
arr[k]=aUl[k];
}
//对数组里的ul用其高度排序
arr.sort(function(ul1,ul2){
return ul1.offsetHeight-ul2.offsetHeight;
});
//给高度最短的ul添加li（图片）
arr[0].appendChild(oLi);
}
}
//页面加载完后，直接执行一次函数，生成20张图片
create20();
//当滚动条变化时，执行函数
window.onscroll=function(){
//获取滚动条滚动的纵向距离
var scrollT=document.documentElement.scrollTop || document.body.scrollTop;
//获取可视区的高度
var scrollBottom=scrollT+document.documentElement.clientHeight;
//判断，当滚动距离大于或等于20张图片加载完body的高度时，再次加载20张图片，实现瀑布流效果
//-500的作用是避免用户看到最后高度不一的图片和空白区域，具体数值随意
if(scrollBottom>=document.body.offsetHeight-500){
console.log('加载更多');//在调试框突出继续加载效果
create20();
}
};
};
</script>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>
网友评论