数据的瀑布流加载
1.设置当前页和每页显示的数据条数两个变量
2.计算总页数,运用向上取整函数Math.ceil();
3.将每次返回的数据动态渲染到页面;
4.添加滚动事件;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.content{
width:500px;
height:300px;
border:1px solid #000;
margin:0 auto;
overflow-y: scroll;
}
.content>div{
line-height: 40px;
border-bottom: 1px dashed #00aaff;
}
.content>div span{
display: inline-block;
width:70px;
}
</style>
</head>
<body>
<div class="content">
</div>
<script>
var stulist = [
{"name": "小黑1", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑2", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑3", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑4", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑5", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑6", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑7", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑8", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑9", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑0", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑11", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑12", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑13", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑14", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑15", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑16", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑17", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑18", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑19", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑21", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑22", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑23", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑24", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑25", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑26", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑27", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑28", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑29", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑31", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑32", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑33", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑34", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑35", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑36", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑37", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑38", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑39", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑41", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑42", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑43", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑44", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑45", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑46", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑47", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑48", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑49", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑51", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑52", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑53", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑54", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑55", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑56", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑57", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑58", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑59", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑61", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑62", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑63", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑64", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑65", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑66", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑67", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑68", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑71", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑72", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑73", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑74", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑75", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑76", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑77", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑78", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑79", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑81", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑82", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑83", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑84", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑85", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑86", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑87", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑88", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑89", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑91", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑92", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑93", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑94", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑95", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑96", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑97", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑98", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑101", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑102", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑103", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑104", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑105", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑106", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑107", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑108", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑109", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑111", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑112", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑113", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑114", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑115", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑116", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑117", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑118", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑121", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑122", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑123", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑124", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑125", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑126", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
{"name": "小黑127", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""}
];
var nowPage=1;
var pageNum=10;
var total=Math.ceil(stulist.length/pageNum);
var parEle=null;
window.onload=function(){
parEle=document.getElementsByClassName('content')[0];
var data=returnData(nowPage,pageNum);
rederData(data);
//添加滚动事件
parEle.onscroll=function(){
console.log(this.clientHeight);//元素实际高
console.log(this.scrollTop);//向下滑动的距离
console.log(this.scrollHeight);//滑动的总高
if(this.clientHeight+this.scrollTop>=this.scrollHeight){
//加载另一页的数据到页面
nowPage++;
if(nowPage>total){
return;
}
var data=returnData(nowPage,pageNum);
rederData(data);
}
}
}
//每次返回对应的数据
function returnData(now,num){
return stulist.slice((now-1)*num,now*num);
}
//动态渲染到元素内部
function rederData(info){
var str="";
for(var i=0;i<info.length;i++)
{
str+="<div><span>"+info[i].name+"</span><span>"+info[i].age+"</span><span>"+info[i].sex+"</span><span>"+info[i].tel+"</span><span>"+info[i].address+"</span><span>"+info[i].des+"</span></div>";
}
parEle.innerHTML+=str;
}
</script>
</body>
</html>