首页>>分页>>Infinite-Scroll无限滚动加载数据(2016-05-19)

Infinite-Scroll无限滚动加载数据

Infinite-Scroll无限滚动加载数据
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2.             $('#content').infinitescroll({  
  3.                 loading: {  
  4.                     msgText: "",  
  5.                     img: "images/loading.gif",  
  6.                     finishedMsg: '没有新数据了哦...',  
  7.                     selector: '.loading' //loading选择器  
  8.                 },  
  9.                 navSelector: "#pages", //导航的选择器，会被隐藏  
  10.                 nextSelector: "#next", //包含下一页链接的选择器  
  11.                 itemSelector: "p", //你将要取回的选项(内容块)  
  12.                 debug: true, //启用调试信息，若启用必须引入debug.js  
  13.                 dataType: 'html', //格式要和itemSelector保持一致  
  14.                 maxPage: 5, //最大加载的页数  
  15. //                animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有  
  16.                 extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150  
  17. //                bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短  
  18.                 errorCallback: function() { //加载完数据后的回调函数  
  19.   
  20.                 },  
  21.                 path: function(index) { //获取下一页方法  
  22.                     return "page.php?p=" + index;  
  23.                 },  
  24.             }, function(newElements, data, url) { //回调函数  
  25.                 //console.log(data);  
  26.                 //alert(url);  
  27.             });  
  28.         </script>  
XML/HTML Code
  1. <div class="container">  
  2.             <div class="demo">  
  3.                 <div id="content">  
  4.                         
  5.                     <p>    
  6.                     <a>360度产品展示,js+图片</a>     
  7.                     </p>    
  8.                         
  9.                         
  10.                     <p>    
  11.                     <a>Js表单验证 email验证</a>     
  12.                     </p>    
  13.                         
  14.                         
  15.                     <p>    
  16.                     <a>一组超酷的CSS3 3D按钮</a>     
  17.                     </p>    
  18.                         
  19.                         
  20.                     <p>    
  21.                     <a>简单的纯css下拉导航菜单</a>     
  22.                     </p>    
  23.                         
  24.                         
  25.                     <p>    
  26.                     <a>放大镜效果 微型图 中型图与放大的图片 外部放大和内部放大</a>     
  27.                     </p>    
  28.                         
  29.                         
  30.                     <p>    
  31.                     <a>一个翻书的效果，上一页下一页</a>     
  32.                     </p>    
  33.                         
  34.                         
  35.                     <p>    
  36.                     <a>可以增加不同滤镜效果的焦点图，带缩略图</a>     
  37.                     </p>    
  38.                         
  39.                         
  40.                     <p>    
  41.                     <a>滚动调整图片大小</a>     
  42.                     </p>    
  43.                         
  44.                         
  45.                     <p>    
  46.                     <a>鼠标经过伸缩的导航菜单</a>     
  47.                     </p>    
  48.                         
  49.                         
  50.                     <p>    
  51.                     <a>prettyPhoto 插件的使用 图片组浏览器 异步加载，iframe内容加载 弹出层</a>     
  52.                     </p>    
  53.                         
  54.                         
  55.                 </div>  
  56.                 <div id="pages"><a id="next" href="page.php?page=1">下一页</a></div>  
  57.                 <div class="loading"></div>  
  58.             </div>  

 


原文地址:http://www.freejs.net/article_fenye_559.html