jQuery插件infinitescroll参数无限翻页

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery插件infinitescroll参数无限翻页相关的知识,希望对你有一定的参考价值。

转自:http://blog.163.com/penglie_520/blog/static/19440505020127255319862/

 

infinite-scroll-jquery

参数详解:

$(‘#content‘).infinitescroll({
  navSelector  : "div.navigation", //导航的选择器,会被隐藏
  nextSelector : "div.navigation a:first",//包含下一页链接的选择器
  itemSelector : "#content div.post",//你将要取回的选项(内容块)
  debug        : true, //启用调试信息
  loadingImg   : "/img/loading.gif", //加载的时候显示的图片
                            //默认采用:"http://www.infinite-scroll.com/loading.gif"
  animate      : true, //当有新数据加载进来的时候,页面是否有动画效果,默认没有
  extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载,默认150
  bufferPx     : 40,//载入信息的显示时间,时间越大,载入信息显示时间越短
  errorCallback: function(){},//当出错的时候,比如404页面的时候执行的函数
  localMode    : true //是否允许载入具有相同函数的页面,默认为false
  },function(arrayOfNewElems){
  //程序执行完的回调函数
}); 

 取消绑定事件的函数写法:$(window).unbind(‘.infscr’); 通过事件触发加载数据的写法:

$(document).trigger(‘retrieve.infscr’); //比如加到某个click事件中

此插件还有一个鲜为人知的功能就是可以载入任何页面的选择器中的内容,可以是id以及是class,并转化到html存储。要比jquery自带的的load强大多了。

$(‘‘).load(‘/page/2/ #content div.post‘,function(){      $(this).appendTo(‘#content‘);  });

官方首页及下载地址: http://www.infinite-scroll.com/
 
Masonry
参数详解:
$(function(){
 $(?#container?).masonry({
 // options 设置选项
 itemSelector : ?.item?, //子类元素选择器
 columnWidth : 240 ,//一列的宽度 ,包括边距 220+10+10
 isAnimated:true, //使用jquery的布局变化,是否启用动画效果
 animationOptions:{
 //jquery animate属性 ,动画效果选项。比如渐变效果 Object { queue: false, duration: 500 }
 },
 gutterWidth:0,//列的间隙
 isFitWidth:true,//自适应宽度
 isResizableL:true,// 是否可调整大小
 isRTL:false,//使用从右到左的布局
 });
 }); 
官方首页及下载地址:http://masonry.desandro.com/index.html
双剑合璧
演示代码:
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script src="jquery.infinitescroll.min.js" type="text/javascript"></script>
<script src="jquery.masonry.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $container = $(‘#content ul‘); //设置容器
$(‘#content ul‘).infinitescroll({   
    navSelector  : "div.page .pages",  //导航的选择器
    nextSelector : "div.page .pages a.nextpage",  //包含下一页链接的选择器
    itemSelector : "#content ul li"  //你将要取回的选项(内容块)
  }, function( newElements ) {
  //程序执行完的回调函数
  var $newElems = $( newElements );
  $container.masonry( ‘appended‘, $newElems );
  });
   $(‘#content‘).masonry({
    itemSelector : ‘#content li‘, //子类元素
    columnWidth : 251 //一列的宽度
  });
});
</script> 
 
 

以上是关于jQuery插件infinitescroll参数无限翻页的主要内容,如果未能解决你的问题,请参考以下文章

在 Webpacker 中使用 jQuery 插件

Wordpress 插件“无限滚动”(jQuery)破解帮助

jQuery瀑布流无限拖三大利器:masonry+imagesloaded+infinitescroll

jquery插件实现分页

jQuery上传文件使用jQuery的ajax方法(无插件)

jQuery 单页无刷新插件