转自: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参数【无限翻页】的更多相关文章

  1. jquery插件实现上下滑动翻页效果

    <!DOCTYPE > <meta charset="utf-8" /> <head> <title>测试jquery</ti ...

  2. jQuery中turn.js(翻页效果)学习笔记

    Turn.js是一个内置的jQuery翻页插件1 html中引入<script type="text/javascript" src="js/turn.js&quo ...

  3. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  4. jQuery垂直缩略图相册插件 支持鼠标滑动翻页

    在线演示 本地下载

  5. jQuery实现按键盘方向键翻页

    1.jQuery代码: $(document).ready(function(){ var prevpage=$("#pre").attr("href"); v ...

  6. jQuery支持mobile的全屏水平横向翻页效果

    这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件. 该翻页插件能够使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果很不错. 在 ...

  7. 6个超炫酷的HTML5电子书翻页动画

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...

  8. 基于vue实现上下滑动翻页效果

    18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...

  9. 我今天也学习了做jquery插件

    先贴代码 (function ( $ ) { var id=33; $.fn.validate=function(options){ // This is the easiest way to hav ...

随机推荐

  1. 谈JSON在Ajax中的使用

    JSON是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.AJAX是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术.之前也曾介绍过在PHP语言中使用JSON的文章, ...

  2. Java内存管理以及各个内存区域详解

    一.概述 原文链接:http://blog.csdn.net/l271640625/article/details/39761439 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若 ...

  3. 安卓在SQLiteOpenHelper类进行版本升级和降级

    一.升级(使用到onUpgrade()方法和onCreate()没有安装过才用到) 简单理一下思路:  v1.0 (也就是说第一次使用这软件,没有安装过 所有在onCreate() 方法里写代码)   ...

  4. Ubuntu中使用终端运行Hadoop程序

    接上一篇<Ubuntu Kylin系统下安装Hadoop2.6.0> 通过上一篇,Hadoop伪分布式基本配好了. 下一步是运行一个MapReduce程序,以WordCount为例: 1. ...

  5. 深入懂得android view 生命周期

    作为自定义 view 的基础,如果不了解android  view 的生命周期 , 那么你将会在后期的维护中发现这样那样的问题 ....... 做过一段时间android 开发的同学都知道,一般 on ...

  6. [转] Linux中gcc,g++常用编译选项

    http://blog.sina.com.cn/s/blog_5ff2a8a201011ro8.html gcc/g++ 在执行编译时,需要4步 1.预处理,生成.i的文件[使用-E参数] 2.将预处 ...

  7. Python多线程锁

    [Python之旅]第六篇(四):Python多线程锁   python lock 多线程 多线程使用方法 多线程锁 摘要:   在多线程程序执行过程中,为什么需要给一些线程加锁以及如何加锁,下面就来 ...

  8. Directive Definition Object

    不知道为什么这个我并没有想翻译过来的欲望,或许我并没有都看熟透,不好误人子弟,原版奉上. Here's an example directive declared with a Directive D ...

  9. js原生封装自定义滚动条

    /* * @Author: dothin前端 * @Date: 2015-11-21 00:12:15 * @Last Modified by: dothin前端 * @Last Modified t ...

  10. .NET读取Excel

    1.代码 string strConn = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + Path + ";Ext ...