360SDN.COM

Infinite-Scroll无限滚动加载数据(网页瀑布流)

来源:  2017-08-29 15:32:20    评论:0点击:

无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据。
首先我们在页面上先放置10条数据,即第一页,每一项都是p标签:
Infinite-Scroll演示效果http://www.sucaihuo.com/php/108.html

    <div id="content">
        <p><a href="http://www.sucaihuo.com/js/91.html" target="_blank">1、PHP生成图片验证码</a></p>
        <p><a href="http://www.sucaihuo.com/js/90.html" target="_blank">2、jQuery实现table上移下移和置顶</a></p>
        <p><a href="http://www.sucaihuo.com/js/89.html" target="_blank">3、基于jQuery的cookie插件</a></p>
        <p><a href="http://www.sucaihuo.com/js/88.html" target="_blank">4、jQuery仿淘宝图片放大镜插件imagezoom</a></p>
        <p><a href="http://www.sucaihuo.com/js/87.html" target="_blank">5、简单jQuery商品属性选择表单</a></p>
       .......
    </div>

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

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

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);
    });




为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权