滾動無限加載示例 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無限翻頁效果</title>
<script src="load/jquery-2.1.0.min.js"></script>
<script src="load/jquery.infinitescroll.js"></script>
<script>
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //頁面分頁元素--成功後自動隱藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 5, //加載次數
});
});
</script>
</head>
<body>
<div id="container"> <!-- 容器 -->
<div class="scroll"> <!-- 每次要加載數據的數據塊-->
第一頁內容第一頁內容<br>
第一頁內容<br>第一頁內容<br>第一頁內容<br>
第一頁內容<br>第一頁內容<br>第一頁內容<br>
第一頁內容<br>第一頁內容<br>第一頁內容
</div>
</div>
<div id="navigation" align="center"> <!-- 頁面導航-->
<!-- 此處可以是url,可以是action,要注意不是每種html都可以加,
是跟當前網頁有相同佈局的纔可以。
另外一個重要的地方是page參數,這個一定要加在這裏,它的作用是指出當前頁面頁碼,
每加載一次數據,page自動+1,我們可以從服務器用request拿到他然後進行後面的分頁處理。-->
<!-- loadnext.html中的數據和本頁scroll的div區域的佈局一致 -->
<a href="loadnext.html?page=1"></a>
</div>
</body>
</html>
loadnext.html:
<div class="scroll">
<!-- 每次要加載數據的數據塊-->
第二頁內容第二頁內容<br> 第二頁內容<br>第二頁內容<br>第二頁內容<br>
第二頁內容<br>第二頁內容<br>第二頁內容<br>
第二頁內容<br>第二頁內容<br>第二頁內容
</div>