更新 2020-08-05 浏览 1104次
HTML代码
首先我们在页面上先放置10条数据,即第一页,每一项都是p标签:
<div id="content"> <p><a href="https://www.mabangzhu.com" target="_blank">1、PHP生成图片验证码</a></p> <p><a href="https://www.mabangzhu.com" target="_blank">2、jQuery实现table上移下移和置顶</a></p> <p><a href="https://www.mabangzhu.com" target="_blank">3、基于jQuery的cookie插件</a></p> <p><a href="https://www.mabangzhu.com" target="_blank">4、jQuery仿淘宝图片放大镜插件imagezoom</a></p> <p><a href="https://www.mabangzhu.com" 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>
JS代码
$('#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); });