Infinite-Scroll滚动加载数据

无限滚动的实现原理：当滚动条到底离网页底部一定长度的时候，向后台发送页数并获取数据。
首先我们在页面上先放置10条数据，即第一页，每一项都是p标签：
Infinite-Scroll演示效果：http://www.sucaihuo.com/php/108.html<div> <br>     <p><a>1、php生成图片验证码</a></p> <br>     <p><a>2、jQuery实现table上移下移和置顶</a></p> <br>     <p><a>3、基于jQuery的cookie插件</a></p> <br>     <p><a>4、jQuery仿淘宝图片放大镜插件imagezoom</a></p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/xiazai/code/11037"> <img src="https://img.php.cn/upload/webcode/000/000/001/176474889466892.jpg" alt="Difeye-敏捷的轻量级PHP框架"> </a> <div class="aritcle_card_info"> <a href="/xiazai/code/11037">Difeye-敏捷的轻量级PHP框架</a> <p>Difeye是一款超轻量级PHP框架，主要特点有： Difeye是一款超轻量级PHP框架，主要特点有： ◆数据库连接做自动主从读写分离配置，适合单机和分布式站点部署； ◆支持Smarty模板机制，可灵活配置第三方缓存组件； ◆完全分离页面和动作，仿C#页面加载自动执行Page_Load入口函数； ◆支持mysql，mongodb等第三方数据库模块，支持读写分离，分布式部署； ◆增加后台管理开发示例</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="Difeye-敏捷的轻量级PHP框架"> <span>0</span> </div> </div> <a href="/xiazai/code/11037" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="Difeye-敏捷的轻量级PHP框架"> </a> </div>  <br>     <p><a>5、简单jQuery商品属性选择表单</a></p> <br>    ....... <br> </div>接着我们再放入导航的选择器#pages和下一页#next，.loading可不放。<div><a>下一页</a></div> <br><div></div>infinitescroll调用$('#content').infinitescroll({ <br>     loading: { <br>         msgText: "", <br>         img: "images/loading.gif", <br>         finishedMsg: '没有新数据了哦...', <br>         selector: '.loading' //loading选择器 <br>     }, <br>     navSelector: "#pages", //导航的选择器，会被隐藏 <br>     nextSelector: "#next",//包含下一页链接的选择器 <br>     itemSelector: "p",//你将要取回的选项(内容块) <br>     debug: true, //启用调试信息，若启用必须引入debug.js <br>     dataType: 'html',//格式要和itemSelector保持一致 <br>     maxPage: 5,//最大加载的页数 <br>     //                animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有 <br>     extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150 <br>     //                bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短 <br>     errorCallback: function() { //加载完数据后的回调函数 <br>     }, <br>     path: function(index) { //获取下一页方法 <br>         return "page.php?p=" + index; <br>     }, <br> }, <br> function(newElements, data, url) { //回调函数 <br>     //console.log(data); <br>     //alert(url); <br> });

AD：真正免费，域名+虚机+企业邮箱=0元