Infinite-Scroll无限滚动加载数据

无限滚动的实现原理：当滚动条到底离网页底部一定长度的时候，向后台发送页数并获取数据。
首先我们在页面上先放置10条数据，即第一页，每一项都是p标签：

 
    
1、PHP生成图片验证码
 
    
2、jQuery实现table上移下移和置顶
 
    
3、基于jQuery的cookie插件
 
    
4、jQuery仿淘宝图片放大镜插件imagezoom
 
    
5、简单jQuery商品属性选择表单
 
   ....... 

接着我们再放入导航的选择器#pages和下一页#next，.loading可不放。

下一页
 

[b]jquery.infinitescroll.js插件调用[/b]：
$('#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);
});
infinitescroll无限滚动演示：[url]http://www.sucaihuo.com/php/108.html[/url] :idea: :idea: :idea: