1、我们在项目中经常会有这样的需求就是需要滚动加载数据；
2、原理利用分页的原理即可实现；见下面代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条滚动加载</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
init();
});
//定义几个全局变量
var currPage = 1;
var currPageSize = 10;
var recordCount = 0;
function init(){
var para={};
//默认加载第一页
dataBody(para);
if(currPage==1){
//清空数据
$("#context").html('');
}
$(window).scroll(function(){//滚动从第二页开始
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if(scrollTop + windowHeight == scrollHeight && ((currPage-1)*currPageSize < recordCount)){
dataBody(para);
}
});
}
/**
* 加载数据的方法
*/
function dataBody(para){
para.currentPage = currPage;//这里值是变的
para.pageSize = currPageSize;
var div='';
/*
这里本来是要后台去数据的，我这里就不取了；其实一样的，
这里取出来的后台的数据，同时需要取出总记录数； recordCount = res.recordCount ;
如果不清楚的加好友QQ6190660780；希望和大家共同提高
*/
/*$.post('',para,function(res){},'json');*/
recordCount=38;//这里用于测试可以加载四次；
div='<dl>'+
'<div class="title">我是标题</div>'+
'<p>1、此处省略1000字</p>'+
'<p>2、此处省略1000字</p>'+
'<p>3、此处省略1000字</p>'+
'<p>4、此处省略1000字</p>'+
'<p>5、此处省略1000字</p>'+
'</dl>';
$("#context").append(div);
//让页码向下走一个
currPage+=1;
}
</script>
<style type="text/css">
.title{
text-align: center;
line-height: 30px;
background: #216BE6
}
</style>
</head>
<body>
<h1>滚动加载内容</h1>
<div id="context">
<!-- 此处就是循环部分
<dl>
<div class="title">我是标题</div>
<p>1、此处省略1000字</p>
<p>2、此处省略1000字</p>
<p>3、此处省略1000字</p>
<p>4、此处省略1000字</p>
<p>5、此处省略1000字</p>
</dl>
-->
</div>
</body>
</html>
3、相关截图
4、案例下载【免积分】http://download.csdn.net/detail/u011431550/8388109
原文地址：http://blog.csdn.net/u011431550/article/details/43033469
