PHP+InfiniteScroll網頁無限滾動載入資料例項

PHP+InfiniteScroll實現網頁無限滾動載入資料例項，實現原理：當捲軸到底離網頁底部一定長度的時候，向後臺傳送頁數並獲取資料。

首先我們在頁面上先放置10條資料，即第一頁，每一項都是p標籤：

<div id="content"> 
    <p><a href="#" target="_blank">1、PHP生成圖片驗證碼</a></p> 
    <p><a href="#" target="_blank">2、jQuery實現table上移下移和置頂</a></p> 
    <p><a href="#" target="_blank">3、基於jQuery的cookie外掛</a></p> 
    <p><a href="#" target="_blank">4、jQuery仿淘寶圖片放大鏡外掛imagezoom</a></p> 
    <p><a href="#" target="_blank">5、簡單jQuery商品屬性選擇表單</a></p> 
   ....... 
</div>

接著我們再放入導航的選擇器#pages和下一頁#next，.loading可不放。

<div id="pages"><a id="next" href="page.php?page=1">下一頁</a></div>
<div class="loading"></div>

然後我們引入jQuery庫、debug.js（除錯）及jquery.infinitescroll.js外掛和js程式碼：

<script type="text/javascript" src="jquery.js"></script>  
<script src="debug.js"></script> 
<script src="jquery.infinitescroll.js"></script>
<script>
$('#content').infinitescroll({ 
    loading: { 
        msgText: "", 
        img: "images/loading.gif", 
        finishedMsg: '沒有新資料了哦...', 
        selector: '.loading' //loading選擇器 
    }, 
    navSelector: "#pages", //導航的選擇器，會被隱藏 
    nextSelector: "#next",//包含下一頁連結的選擇器 
    itemSelector: "p",//你將要取回的選項(內容塊) 
    debug: true, //啟用除錯資訊，若啟用必須引入debug.js 
    dataType: 'html',//格式要和itemSelector保持一致 
    maxPage: 5,//最大載入的頁數 
    //                animate: true, //當有新資料載入進來的時候，頁面是否有動畫效果，預設沒有 
    extraScrollPx: 150, //捲軸距離底部多少畫素的時候開始載入，預設150 
    //                bufferPx: 40, //載入資訊的顯示時間，時間越大，載入資訊顯示時間越短 
    errorCallback: function() { //載入完資料後的回撥函式 
    }, 
    path: function(index) { //獲取下一頁方法 
        return "page.php?p=" + index; 
    }, 
}, 
function(newElements, data, url) { //回撥函式 
    //console.log(data); 
    //alert(url); 
});
</script>

本文轉自： 轉載請註明出處！