代碼如下：
<!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;
});
//該參數(shù)顯示當前的內容數(shù)目
var divSign = 5;
//添加內容方法，pageNum可以設置每次添加的頁數(shù)，其中for循環(huán)中的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()這個方法中，將從后臺請求到的頁面數(shù)據(jù)在這個方法中添加。另外可能暫沒有做兼容性測試，在IE中可能會有問題，兼容性應該主要在獲取內容和滾動條高度這一部分，后續(xù)如果有空也許會對IE兼容。(目前已對IE兼容)
