PHP+InfiniteScroll实现网页无限滚动加载数据实例

php+infinitescroll实现网页无限滚动加载数据实例，实现原理：当滚动条到底离网页底部一定长度的时候，向后台发送页数并获取数据。

首先我们在页面上先放置10条数据，即第一页，410205每一项都是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&一尘不染造句gt; 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         lector: '.loading' //loading选择器薪级工资 11     }, 12     navlector: "#pages", //导航的选择器，会被隐藏 13     nextlecto测公司名字吉凶r: "#next",//包含下一页链接的选择器 14     itemlector: "p",//你将要取回的选项(内容块) 15     debug: true, //启用调试信息，若启用必须引入debug.js 16     datatype: 'html',//格式要和itemlector保持一致 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>

本文转自： 转载阳光旅行请注明出处！