PHP+InfiniteScroll實現網頁無限滾動載入數據實例

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

首先我們在頁面上先放置10條數據，即第一頁，每一項都是p標簽：

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

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

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

然後我們引入jQuery庫、debug.js（調試）及jquery.infinitescroll.js插件和js代碼：

 1 <script type="text/javascript" src="jquery.js"></script>  
 2 <script src="debug.js"></script> 
 3 <script src="jquery.infinitescroll.js"></script>
 4 <script>
 5 $('#content').infinitescroll({ 
 6     loading: { 
 7         msgText: "", 
 8         img: "images/loading.gif", 
 9         finishedMsg: '沒有新數據了哦...', 
10         selector: '.loading' //loading選擇器 
11     }, 
12     navSelector: "#pages", //導航的選擇器，會被隱藏 
13     nextSelector: "#next",//包含下一頁鏈接的選擇器 
14     itemSelector: "p",//你將要取回的選項(內容塊) 
15     debug: true, //啟用調試信息，若啟用必須引入debug.js 
16     dataType: 'html',//格式要和itemSelector保持一致 
17     maxPage: 5,//最大載入的頁數 
18     //                animate: true, //當有新數據載入進來的時候，頁面是否有動畫效果，預設沒有 
19     extraScrollPx: 150, //滾動條距離底部多少像素的時候開始載入，預設150 
20     //                bufferPx: 40, //載入信息的顯示時間，時間越大，載入信息顯示時間越短 
21     errorCallback: function() { //載入完數據後的回調函數 
22     }, 
23     path: function(index) { //獲取下一頁方法 
24         return "page.php?p=" + index; 
25     }, 
26 }, 
27 function(newElements, data, url) { //回調函數 
28     //console.log(data); 
29     //alert(url); 
30 });
31 </script>

本文轉自：https://www.sucaihuo.com/php/108.html 轉載請註明出處！