一、功能描述：
滚动下拉到页面底部加载数据是很多瀑布流网站的做法，本实例是固定数据，小菜总结记录之用，高手勿喷。
首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的 height，jquery如下代 码:
$(window).scrollTop()+$(window).height()>=$(document).height();
再给window绑定scroll事件来实现加载数据显示。
本实例的主要是提供手机版使用所以使用了CSS3的旋转模拟图片加载效果。
在实例中实现了自动判断是否已经具备滚动事件的条件，如果高度不足自动补充下一页，直接满足滚动事件能有效执行，如果已经加载完所有内容，就提示：【Duang～到底了】
二、效果图如下：
三、源代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>
<title>jq滚动到底部自动加载|幸凡学习网</title>
<style>
html,body,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;}
body,html{line-height:1;font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;font-size:16px;color:#333;}
ol,ul{list-style:none;}
a{text-decoration:none;}
body{background:#f2f2f2;}
.prolist li{height:50px;line-height:50px;border-bottom:1px solid #f8f8f8;background:#fff;padding:0 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.prolist li a{color:#333;font-size:16px;}
/**加载效果旋转**/
@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
@keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
.loadmore {display:block;line-height: 50px;text-align:center;color:#ccc;font-size:14px;}
.loadmore span{height:20px;width:20px;border-radius:100%;display:inline-block;margin:10px;border:2px solid #f60;border-bottom-color: transparent;vertical-align: middle;-webkit-animation: rotate 1.1s infinite linear;animation: rotate 1.1s infinite linear;}
.loadover{position:relative;margin:0 12px;padding:24px 0;height:20px;line-height:20px;color:#909090;text-align: center;}
.loadover span{position:relative;display:inline-block;padding:0 6px;height:20px;background:#F2F2F2;z-index:2}
.loadover:after {content:''position: absolute;left: 0;top:50%;width: 100%;height:1px;background:#DCDCDC;z-index:1;display:block;}
</style>
</head>
<body>
<!-- 产品列表 开始-->
<ul class="prolist">
<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
<li><a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！</b></a></li>
</ul>
<!-- 产品列表 结束 -->
<script type="text/javascript" src="http://www.86y.org/js/jquery.min.js"></script>
<script>
var page=1;
var finished=0;
var sover=0;
//如果屏幕未到整屏自动加载下一页补满
var setdefult=setInterval(function (){
if(sover==1)
clearInterval(setdefult);
else if($(".prolist").height()<$(window).height())
loadmore($(window));
else
clearInterval(setdefult);
},500);
//加载完
function loadover(){
if(sover==1)
{
var overtext="Duang～到底了";
$(".loadmore").remove();
if($(".loadover").length>0)
{
$(".loadover span").eq(0).html(overtext);
}
else
{
var txt='<div class="loadover"><span>'+overtext+'</span></div>'
$("body").append(txt);
}
}
}
//加载更多
var vid=0;
function loadmore(obj){
if(finished==0 && sover==0)
{
var scrollTop = $(obj).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(obj).height();
if($(".loadmore").length==0)
{
var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>'
$("body").append(txt);
}
if (scrollTop + windowHeight -scrollHeight<=50 ) {
//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
//防止未加载完再次执行
finished=1;
var result = "";
for(var i = 0; i < 6; i++){
vid++;
result+='<li>'
+'<a href="http://www.86y.org/art_detail.aspx?id=744">好经典人生语句，经典得让人心痛！'+parseInt(vid)+'</a>'
+'</li>'
}
setTimeout(function(){
//$(".loadmore").remove();
$('.prolist').append(result);
page+=1;
finished=0;
//最后一页
if(page==10)
{
sover=1;
loadover();
}
},1000);
/*$.ajax({
type: 'GET',
url: 'json/more.json?t=25&page='+page,
dataType: 'json',
success: function(data){
if(data=="")
{
sover = 1;
loadover();
if (page == 1) {
$("#no_msg").removeClass("hidden");
$(".loadover").remove();
}
}
else
{
var result = ''
for(var i = 0; i < data.lists.length; i++){
result+='<li>'
+'<a href="'+data.lists[i].link+'">'+data.lists[i].title+parseInt(page+1)+"-"+i+'</a>'
+'</li>'
}
// 为了测试，延迟1秒加载
setTimeout(function(){
$(".loadmore").remove();
$('.prolist').append(result);
page+=1;
finished=0;
//最后一页
if(page==10)
{
sover=1;
loadover();
}
},1000);
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});*/
}
}
}
//页面滚动执行事件
$(window).scroll(function (){
loadmore($(this));
});
</script>
</body>
</html>
DEMO地址：http://www.86y.org/demo/jqscroll/(建议使用手机打开效果更佳)
四结语：
本实例如果大家有什么好的意见可以与我交流，希望能与大家一起完善使用起来更流畅。
（完！）
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)