素材牛

无限滚动数据加载插件Infinite-Scroll

 所属分类:网页特效-滚动/拖拽,独立部件,分页

 浏览:297次-  下载:3次-  评论:0次-  发布时间:2018-12-21
无限滚动数据加载插件Infinite-Scroll兼容IE6
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:无限滚动加载数据的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据显示出来。

详细介绍

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

HTML部分

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

<div id="content">
    <p>请往下滑动……</p>
    <p><a href="http://www.sucainiu.com" target="_blank">1、PHP生成图片验证码</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">2、jQuery实现table上移下移和置顶</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">3、基于jQuery的cookie插件</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">4、jQuery仿淘宝图片放大镜插件imagezoom</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">5、简单jQuery商品属性选择表单</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">6、jQuery+iPresenter3D旋转图片超炫效果</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">7、PHP生成图片验证码</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">8、jQuery实现table上移下移和置顶</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">9、基于jQuery的cookie插件</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">10、jQuery仿淘宝图片放大镜插件imagezoom</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>

PHP后端(模拟数据拉取,实际应用中按自身需要自行编写)

<?php
$page = isset($_GET['p']) ? intval($_GET['p']) : "";
if ($page == 2) {
    ?>
    <p><a href="http://www.sucainiu.com" target="_blank">11、win8风格+bootstrap后台全套模板下载</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">12、蓝色的OA后台模板下载</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">13、软件后台登陆界面模板下载</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">14、人力资源后台首页模板下载</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">15、外卖超人全套网站模板下载</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">16、国外化妆品模板</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">17、win8风格+bootstrap后台全套模板下载</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">18、蓝色的OA后台模板下载</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">19、软件后台登陆界面模板下载</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">20、人力资源后台首页模板下载</a></p>

<?php } elseif ($page == 3) { ?>
    <p><a href="http://www.sucainiu.com" target="_blank">21、简单jQuery商品属性选择表单</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">22、jQuery+iPresenter3D旋转图片超炫效果</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">23、PHP生成图片验证码</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">24、jQuery实现table上移下移和置顶</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">25、基于jQuery的cookie插件</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">26、jQuery仿淘宝图片放大镜插件imagezoom</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">27、简单jQuery商品属性选择表单</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">28、jQuery+iPresenter3D旋转图片超炫效果</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">29、PHP生成图片验证码</a></p>
    <p><a href="http://www.sucainiu.com" target="_blank">30、jQuery仿淘宝图片放大镜插件imagezoom</a></p>

<?php } ?>

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:3
所需牛币:20 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证