最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

Infinite-Scroll无限滚动加载数据

来源:http://www.erdangjiade.com/ 沐浴春风 2015-05-09 08:58浏览(1774)

无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

分类:其它特效 > Ajax 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 80 积分

HTML

首先我们在页面上先放置10条数据,即第一页,每一项都是p标签:

<div id="content">
    <p><a href="http://www.erdangjiade.com/js/91.html" target="_blank">1、PHP生成图片验证码</a></p>
    <p><a href="http://www.erdangjiade.com/js/90.html" target="_blank">2、jQuery实现table上移下移和置顶</a></p>
    <p><a href="http://www.erdangjiade.com/js/89.html" target="_blank">3、基于jQuery的cookie插件</a></p>
    <p><a href="http://www.erdangjiade.com/js/88.html" target="_blank">4、jQuery仿淘宝图片放大镜插件imagezoom</a></p>
    <p><a href="http://www.erdangjiade.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>

然后我们引入jQuery库、debug.js(调试)及jquery.infinitescroll.js插件:

<script type="text/javascript" src="jquery.js"></script> 
<script src="debug.js"></script>
<script src="jquery.infinitescroll.js"></script>

jQuery

$('#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);
});

还有一点提示的是官网提供的部分函数不起作用,比如:loadingImg、loadingText。你可以配合瀑布流,那效果就更帅了...

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/108.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    02-20 16:36
    ngu137
    加载数据不错啊。。。
1 2