代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
</head>
<body>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<button class="loadingMore">加载更多</button>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var autoScrollSign = 0;
//每次滚动添加3页内容
$(document).scroll(function() {
var scrollH = $(document).scrollTop(); //滚动高度
var contentH = $(document).height(); //内容高度
//如果滚动条与内容高度相差1200px则添加页面内容
if((contentH-scrollH) < 1200 && autoScrollSign<3){
inputNextPage(3);
autoScrollSign++;
}
});
//点击加载更多则加载一页内容 。
$(".loadingMore").click(function(){
var classArray = document.getElementsByClassName("content");
var length = classArray.length;
var nowScrollTop = $(document).scrollTop();
inputNextPage(1);
$(document).scrollTop(nowScrollTop);
autoScrollSign = 0;
});
//该参数显示当前的内容数目
var divSign = 5;
//添加内容方法，pageNum可以设置每次添加的页数，其中for循环中的4表示每次添加4条内容，可以自定义修改
function inputNextPage(pageNum){
for (var i = 0; i < pageNum*4; i++) {
var classArray = document.getElementsByClassName("content");
var lastDom = classArray[classArray.length-1];
var newDom = document.createElement("div");
newDom.className="content";
newDom.innerHTML = divSign++;
insertAfter(newDom,lastDom);
}
}
function insertAfter(newElement, targentElement) {
var parent = targentElement.parentNode;
if (parent.lastChild == targentElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targentElement.nextSibling);
}
}
});
</script>
<style>
.content{
width: 90%;
margin:5%;
height: 300px;
background: red;
}
</style>
</body>
</html>
展示效果如图：
1_1.gif
其他需要修改的地方主要在inputNextPage()这个方法中，将从后台请求到的页面数据在这个方法中添加。另外可能暂没有做兼容性测试，在IE中可能会有问题，兼容性应该主要在获取内容和滚动条高度这一部分，后续如果有空也许会对IE兼容。(目前已对IE兼容)
