網上對于infinite-scroll插件使用的例子不多。但由于它的出現，鼓吹了瀑布流形式的頁面展示方式，所以不得不了解了解這種新的分頁方式。
官網上有對infinite-scroll的詳細描述，但一般人即使看未必看得懂，看得懂未必就調試成功。所以借今晚有點時間，把跑通的例子供大家借鑒。
一.無限滾動概念
首先，它是基于jQuery的，另外還要明白無限滾動的概念：無限滾動的實現原理就是當你在網頁上的滾動條滾動到離網頁底部一定長度的時候，觸發某ajax函數（infinite-scroll內已經封裝好）,往后臺加載文件或者數據，又或者從外部引入靜態html形式文件。
二.探討infinite-scroll
1.從網頁頭引入兩個js文件，注意必須先放jquery的
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
2.之后在網頁頭自己寫一個js腳本
<script>
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //頁面分頁元素--本頁的導航，意思就是一個可以觸發ajax函數的模塊
nextSelector: "#navigation a", //下一頁的導航
itemSelector: ".scroll " , //此處我用了類選擇器，選擇的是你要加載的那一個塊（每次載入的數據放的地方）
animate: true, //加載時候時候需要動畫，默認是false
maxPage: 3, //最大的頁數，也就是滾動多少次停。這個頁碼必須得要你從數據庫里面拿
});
});
</script>
3.或許你看到這里還是不太清楚網頁怎么定義，這里給出我的demo，希望可以有幫助
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無限翻頁效果</title>
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
<script src="css/infinite-scroll/test/debug.js"></script>
<script>
$(document).ready(function (){ //別忘了加這句，除非你沒學Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //頁面分頁元素--成功后自動隱藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
});
});
</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"> <!-- 頁面導航-->
<a href="user/list?page=1"></a> <!-- 此處可以是url，可以是action，要注意不是每種html都可以加，是跟當前網頁有相同布局的才可以。另外一個重要的地方是page參數，這個一定要加在這里，它的作用是指出當前頁面頁碼，沒加載一次數據，page自動+1,我們可以從服務器用request拿到他然后進行后面的分頁處理。-->
</div>
</body>
</html>
三.細微部分
1.js函數里還可定義的其他屬性:
debug : true, //用于調試，如果需要用到，只需在網頁頭引入官網demo里的debug.js文件
loadingImg : "/img/loading.gif", //加載時候顯示的進度條，用戶可以自定義
loadingText : "Loading new posts...", //加載時顯示的文字
extraScrollPx: 50, //離網頁底部多少像素時觸發ajax
donetext : "I think we've hit the end, Jim" , //加載完數據(到達底部時)顯示的文字提醒
errorCallback: function(){}, //加載完數據后的回調函數，可選
其他屬性暫不作過多介紹
2.數據的載入方式
①html ：如果你已經有固定的數據塊，可以放到html里面加載靜態頁面。
②json ：可以用后臺返回json的方式，返回的時候要指定temple里面的html模版，否則會出錯。
③我上面例子用的其實也是json，前臺在Action層把數據取出后再用StringBuilder拼裝成html格式的字符串返回前臺。（個人習慣）
3.數據分頁方式
本例用hibernate進行數據分頁。
官網上有對infinite-scroll的詳細描述，但一般人即使看未必看得懂，看得懂未必就調試成功。所以借今晚有點時間，把跑通的例子供大家借鑒。
一.無限滾動概念
首先，它是基于jQuery的，另外還要明白無限滾動的概念：無限滾動的實現原理就是當你在網頁上的滾動條滾動到離網頁底部一定長度的時候，觸發某ajax函數（infinite-scroll內已經封裝好）,往后臺加載文件或者數據，又或者從外部引入靜態html形式文件。
二.探討infinite-scroll
1.從網頁頭引入兩個js文件，注意必須先放jquery的
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
2.之后在網頁頭自己寫一個js腳本
<script>
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //頁面分頁元素--本頁的導航，意思就是一個可以觸發ajax函數的模塊
nextSelector: "#navigation a", //下一頁的導航
itemSelector: ".scroll " , //此處我用了類選擇器，選擇的是你要加載的那一個塊（每次載入的數據放的地方）
animate: true, //加載時候時候需要動畫，默認是false
maxPage: 3, //最大的頁數，也就是滾動多少次停。這個頁碼必須得要你從數據庫里面拿
});
});
</script>
3.或許你看到這里還是不太清楚網頁怎么定義，這里給出我的demo，希望可以有幫助
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無限翻頁效果</title>
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
<script src="css/infinite-scroll/test/debug.js"></script>
<script>
$(document).ready(function (){ //別忘了加這句，除非你沒學Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //頁面分頁元素--成功后自動隱藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
});
});
</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"> <!-- 頁面導航-->
<a href="user/list?page=1"></a> <!-- 此處可以是url，可以是action，要注意不是每種html都可以加，是跟當前網頁有相同布局的才可以。另外一個重要的地方是page參數，這個一定要加在這里，它的作用是指出當前頁面頁碼，沒加載一次數據，page自動+1,我們可以從服務器用request拿到他然后進行后面的分頁處理。-->
</div>
</body>
</html>
三.細微部分
1.js函數里還可定義的其他屬性:
debug : true, //用于調試，如果需要用到，只需在網頁頭引入官網demo里的debug.js文件
loadingImg : "/img/loading.gif", //加載時候顯示的進度條，用戶可以自定義
loadingText : "Loading new posts...", //加載時顯示的文字
extraScrollPx: 50, //離網頁底部多少像素時觸發ajax
donetext : "I think we've hit the end, Jim" , //加載完數據(到達底部時)顯示的文字提醒
errorCallback: function(){}, //加載完數據后的回調函數，可選
其他屬性暫不作過多介紹
2.數據的載入方式
①html ：如果你已經有固定的數據塊，可以放到html里面加載靜態頁面。
②json ：可以用后臺返回json的方式，返回的時候要指定temple里面的html模版，否則會出錯。
③我上面例子用的其實也是json，前臺在Action層把數據取出后再用StringBuilder拼裝成html格式的字符串返回前臺。（個人習慣）
3.數據分頁方式
本例用hibernate進行數據分頁。
鄂公網安備 42090202000212號