<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<style>
html,
body {}
</style>
<body>
<div id="main">
<ul id="container">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
</html>
<script>
var page = 0;
var loading = false; //是否处于加载状态,true则触发scroll事件也不在加载内容。
var finished = false;//是否已加载完成，ture则不在加载内容。
function loadData() {
totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); //浏览器的高度加上滚动条的高度
if ($(document).height() <= totalheight) { //当文档的高度小于或者等于总的高度的时候,开始动态加载数据
//加载数据
page++;
console.log("这里是第" + page + "页")
$("#container").append("<li>我是新加载出来的数据</li><li>我是新加载出来的数据</li><li>我是新加载出来的数据</li><li>我是新加载出来的数据"+page+"</li>");
}
}
$(window).scroll(function() {
console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
console.log("页面的文档高度 :"+$(document).height());
console.log('浏览器的高度:'+$(window).height());
if(!loading){
loadData();
}
});
</script>