PHP + infinitscoll implements infinite scrolling of web pages to load data instances. The implementation principle: when the scroll bar is a certain length from the bottom of the web page, send the number of pages to the background and get data.

First, we put 10 pieces of data on the page, that is, the first page. Each item is a p tag:

1 <div id="content"> 
2     <p><a href="#" target="_blank">1,PHP Generate picture verification code</a></p> 
3     <p><a href="#" target="_blank">2,jQuery Realization table Up down and top</a></p> 
4     <p><a href="#" target="_blank">3,Be based on jQuery Of cookie Plug-in unit</a></p> 
5     <p><a href="#" target="_blank">4,jQuery Taobao image magnifier plug-in imagezoom</a></p> 
6     <p><a href="#" target="_blank">5,simple jQuery Product attribute selection form</a></p> 
7    ....... 
8 </div>

Then we put in the navigation selector "pages" and "next page". loading is not allowed.

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

Then we introduce the jQuery library, debug.js (debugging), jquery.infinitescoll.js plug-in and JS code:

 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: 'There's no new data...', 
10         selector: '.loading' //loading selector 
11     }, 
12     navSelector: "#pages", //Navigation selector, hidden 
13     nextSelector: "#next",//Selector with next page link 
14     itemSelector: "p",//Options you are about to retrieve(Content block) 
15     debug: true, //Enable debugging information. If enabled, you must import debug.js 
16     dataType: 'html',//Format necessary and itemSelector Bring into correspondence with 
17     maxPage: 5,//Maximum pages loaded 
18     //                animate: true, //When new data is loaded in, whether the page has animation effect is not available by default 
19     extraScrollPx: 150, //How many pixels from the bottom of the scroll bar starts to load, 150 by default 
20     //                bufferPx: 40, //Display time of loading information. The larger the time is, the shorter the display time of loading information is 
21     errorCallback: function() { //Callback function after loading data 
22     }, 
23     path: function(index) { //Get next page method 
24         return "page.php?p=" + index; 
25     }, 
26 }, 
27 function(newElements, data, url) { //Callback function 
28     //console.log(data); 
29     //alert(url); 
30 });
31 </script>

From: https://www.sucaihuo.com/php/108.html Reprint please indicate the source!