向下分页功能

在长列表中，例如有10000条数据，如果一次性把10000条数据都通过后台拉取出来，会造成后台的负担。那么，就需要分页功能，每次滚动页面到最底端的时候，才拉取一小部分（例如10条）数据。本文就实现了向下分页功能。

html文件（index.html）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>向下分页功能</title>
	<style type="text/css">
	body{
		padding: 0;
		margin: 0;
	    text-align: center;
	}
	ul{
		list-style-type: none;
		padding: 0;
	    margin: 0;
	    text-align: center;
	}
    li{
        height:50px;
        line-height:50px;
        font-size:20px;
        color: #000;
        background:#ccc;
        border-bottom:1px solid #fff;
    }
    img{
    	width: 25px;
    	height: 25px;
    	margin: 10px auto;
    }
	</style>
</head>
<body>
	<ul></ul>
	<img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif" />
	
	<script type="text/javascript">

		var countNum = 1;
		var pageSize = 10;	// 定义一次拉10条数据
		
		var ul = document.getElementsByTagName('ul')[0];

		var interval = setInterval(scrollToBottom,1000);

		// 动态添加li标签
		function createLi(){
			var li = document.createElement("li"); 
			li.innerHTML = countNum;
			ul.appendChild(li);
			countNum++;
		}

		// 判断是否翻页
		function scrollToBottom(){
			var currentScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			if( document.body.scrollHeight<=currentScrollTop+window.innerHeight+10 ){
				for(var i=1;i<=pageSize;i++){
					createLi();
				}
			}
		}

	</script>
</body>
</html>