您好,欢迎访问一九零五行业门户网

Infinite-Scroll滚动加载数据

无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据。
首先我们在页面上先放置10条数据,即第一页,每一项都是p标签:
infinite-scroll演示效果:http://www.sucaihuo.com/php/108.html 
    1、php生成图片验证码
2、jquery实现table上移下移和置顶
3、基于jquery的cookie插件
4、jquery仿淘宝图片放大镜插件imagezoom
5、简单jquery商品属性选择表单
.......
接着我们再放入导航的选择器#pages和下一页#next,.loading可不放。下一页
infinitescroll调用$('#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); 
});
ad:真正免费,域名+虚机+企业邮箱=0元
其它类似信息

推荐信息