瀑布流插件|jquery.masonry|使用demo

Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说:

瀑布流插件的一个基本使用,附上基本功能的demo

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.masonry的跑通demo</title>
<script type="text/javascript" src="http://i.tq121.com.cn/j/jquery-1.8.2.js"></script>
<script src="http://i.tq121.com.cn/j/plugs/jquery.masonry.min.js"></script>
<style>
div div{ background:red; width:100px; margin:10px; color:#fff; padding:10px;}
</style>
</head><body>
<div id="container"><div class="item" style=" width:100px">a a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  a</div><div class="item" style=" width:100px">a a a a a a a a a a a a a a a a a a a a  a</div><div class="item" style=" width:100px">a a a a  a a  a a a  a</div><div class="item" style=" width:100px">a a a a a  a</div><div class="item" style=" width:100px">a a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  aa a a a a  a</div><div class="item" style=" width:100px">a a a a a a a a a a a a a a a a a a a a  a</div><div class="item" style=" width:100px">a a a a  a a  a a a  a</div><div class="item" style=" width:100px">a a a a a  a</div>
</div><script type="text/javascript">$(function(){$('#container').masonry({// options 设置选项
      itemSelector : '.item',//class 选择器
      columnWidth : 240 ,//一列的宽度 Integer
          isAnimated:true,//使用jquery的布局变化  Boolean
          animationOptions:{//jquery animate属性 渐变效果  Object { queue: false, duration: 500 }
          },gutterWidth:0,//列的间隙 Integer
          isFitWidth:true,// 适应宽度   Boolean
          isResizableL:true,// 是否可调整大小 Boolean
          isRTL:false,//使用从右到左的布局 Boolean
  });
});
</script>
</body>
</html>

 首先在页面中引入
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="jquery.infinitescroll.js"></script>

排列body中的内容:
<BODY>  <div id="container">
      <div class="item">a a a a a  a</div>
      <div class="item">a a a a a  a</div>
      <div class="item">a a a a a  a</div>
      <div class="item">a a a a a  a</div>

  </div>
</BODY>

在js中调用插件:
<script type="text/javascript">
  $(function(){
    $('#container').masonry({
      // options 设置选项
      itemSelector : '.item',//class 选择器
      columnWidth : 240 ,//一列的宽度 Integer
          isAnimated:true,//使用jquery的布局变化  Boolean
          animationOptions:{
            //jquery animate属性 渐变效果  Object { queue: false, duration: 500 }
          },
          gutterWidth:0,//列的间隙 Integer
          isFitWidth:true,// 适应宽度   Boolean
          isResizableL:true,// 是否可调整大小 Boolean
          isRTL:false,//使用从右到左的布局 Boolean
  });
});
</script>
当需要排列图片div时:
需要调用:
<script>
var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});
</script>

调用masonry插件的方法格式是:$('#container').masonry( 'methodName', [optionalParameters] )

例如:
.masonry( 'appended', $content, isAnimatedFromBottom )//触发添加到container的项目的布

局.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素预初始化状态
.masonry( 'layout', $items, callback )// 指定项目的布局
.masonry( 'option', options ) //设置option
.masonry( 'reloadItems' ) //重新聚合所有项目以当前的顺序
.masonry( 'reload' ) //用于预先考虑或者插入项目 .masonry( 'reloadItems' )的简化版
.masonry( 'remove', $items ) //从masonry实例或dom中移除项目

调用infinitescroll插件:
$container.infinitescroll({
        navSelector : '#page-nav', //分页导航的选择器
        nextSelector : '#page-nav a', //下页连接的选择器
        itemSelector : '.box', //你要检索的所有项目的选择器
        loading: {
                finishedMsg: 'No more pages to load.',//结束显示信息
                img: 'http://i.imgur.com/6RMhx.gif'//loading图片
        }
},
//作为回调函数触发masonry
function( newElements ) {
// 当加载时隐藏所有新项目
        var $newElems = $( newElements ).css({ opacity: 0 });
// 在添加到masonry布局之前保证图片载入
        $newElems.imagesLoaded(function(){
// 现在可以显示所有的元素了
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
        });
}
);

转载于:https://www.cnblogs.com/liujinyu/p/4098935.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/432163.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有关GNU GCC的基本内容整理

一、GCC简介 GCC&#xff08;GNU Compiler Collection&#xff0c;GNU编译器集合&#xff09;是一套由GNU工程开发的支持多种编程语言的编译器。GCC是自由软件发展过程中的著名例子&#xff0c;由自由软件基金会 以GPL协议发布。当年Richard Stallman 刚开始写作 GCC 的时候&am…

[UE4]C++静态加载问题:ConstructorHelpers::FClassFinder()和FObjectFinder()

相关内容&#xff1a; C实现动态加载的问题&#xff1a;LoadClass<T>()和LoadObject<T>() http://aigo.iteye.com/blog/2281558C实现动态加载UObject&#xff1a;StaticLoadObject()&#xff1b;以Texture和Material为例 http://aigo.iteye.com/blog/2268056 这…

inside uboot (五) DRAM的构成

DRAM(Dynamic Random Access Memory)&#xff0c;即动态随机存取存储器. 1. Storage Cell 如上图&#xff0c;一个DRAM的基本存储单元由4个部分组成。 Storage Capacitor&#xff0c;即存储电容&#xff0c;它通过存储在其中的电荷的多和少&#xff0c;或者说电容两端电压差的…

使用json-lib进行Java和JSON之间的转换

转自http://www.cnblogs.com/mailingfeng/archive/2012/01/18/2325707.html 1. json-lib是一个java类库&#xff0c;提供将Java对象&#xff0c;包括beans, maps, collections, java arrays and XML等转换成JSON&#xff0c;或者反向转换的功能。 2. json-lib 主页 &#xff1a…

inside uboot (六) DRAM芯片的控制线及时序

Clock &#xff08;差分信号&#xff0c;CLK和nCLK&#xff09;为时钟信号 &#xff08;同一个rank共用&#xff09; CKE 时钟信号使能 &#xff08;同一个rank共用&#xff09; RAS 为行选…

MVC — 初步理解IIS工作流程

声明&#xff1a;本文只是自己的总结和积累。IIS7.x 目录 IIS流程及组成部分ASP.NET流程及组成部分IIS与ASP.NET MVC一、IIS流程及组成部分  1、Http.SYS&#xff1a;负责监听HTTP请求&#xff08;它不属于IIS范畴&#xff0c;但是和IIS联系紧密&#xff09; Http.SYS和IIS是…

卷积积分这样学!

卷积积分是一种数学运算&#xff0c;那么既然是数学运算&#xff0c;那么就得有数学的特性——定义、性质、定理。 本文将从卷积积分的理论、案例、求解方法、知识图谱四方面介绍卷积积分&#xff01; 一、【理论】卷积积分的理论 卷积积分定义&#xff1a; 卷积图解01 卷积…

Canvas应用绚烂效果-creatjs实现

js文件var content;//画布var stage;//舞台var spriteSheet;//精灵列表类var sprite;//精灵window.οnlοadfunction(){ //获取画布 contentdocument.getElementById_x_x_x_x_x_x("canvas"); //画布上创建舞台 stagenew createjs.Stage(content); //舞…

世界地图并不是世界的真实样貌!甚至误差非常大

现在所用的世界地图并不是世界的真实样貌&#xff0c;甚至误差大的离谱。 地球属于三维球体&#xff0c;想完整地表现到二维平面上是不可能的&#xff0c;必须牺牲一些真实属性。因为三维降到二维肯定存在扭曲失真&#xff0c;这是维度差异所决定的&#xff0c;不可避免。 我们…

error MSB6006: cmd.exe exited with code 3

利用vs2012和qt5.5.1&#xff0c;在编译例子时发生如下错误&#xff1a; C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V110\Microsoft.CppCommon.targets(172,5): error MSB6006: “cmd.exe”已退出&#xff0c;代码为 3。 图片如下&#xff1a; 解决办法如下&#x…

OSGI(面向Java的动态模型系统)

http://baike.baidu.com/subview/362847/6280632.htm?fraladdin 转载于:https://www.cnblogs.com/suifengbingzhu/p/4104109.html

JQuery方法

1、replace var str "I am a man"; str.replace(a,b); 说明&#xff1a;jquery的replace()函数默认替换第一项&#xff1b; var re new RegExp(a,g); str.replace(re,b); 说明&#xff1a;RegExp是正则表达式对象&#xff0c; g表示替换全部 2、json与对象的转换 v…

数学天才用5万字让你读懂:微积分!

前面接连发了三篇麦克斯韦方程组的文章&#xff08;积分篇、微分篇和电磁波篇&#xff09;&#xff0c;从理论上来说&#xff0c;讲麦克斯韦方程组不讲微积分是不行的&#xff0c;因为人家本来就是一组积分方程和一组微分方程。 但是&#xff0c;为了让更多人&#xff0c;尤其是…

指定一个actor对pawn不可见

1. 把一个staticmesh作成一个actor 2. 给actor添加一个tag 3. 在pawn的beginPlay里面查找这个actor&#xff0c;并设置actor的owner为pawn&#xff0c;然后调用set owner no see

oracle中DECODE与CASE的用法区别

对于CASE与DECODE其实并没有太多的区别&#xff0c;他们都是用来实现逻辑判断。Oracle的DECODE函数功能很强&#xff0c;灵活运用的话可以避免多次扫描&#xff0c;从而提高查询的性能。而CASE是9i以后提供的语法&#xff0c;这个语法更加的灵活&#xff0c;提供了IF THEN ELSE…

error C4668: 没有将“_WIN32_WINNT_WIN10_TH2”定义为预处理器宏,用“0”替换“#if/#elif”

一般为Windows中的宏和UE4冲突所致&#xff0c;需要用如下头文件包裹冲突的头文件&#xff1a; #include "Windows/AllowWindowsPlatformTypes.h" #include "Windows/PreWindowsApi.h" #include "冲突的头文件" #include "Windows/PostWi…

Delphi XE7实现的任意位置弹出菜单

Delphi XE7中目前还没有弹出菜单组件&#xff0c;这个弹出菜单应用很普遍&#xff0c;在JAVA开发的安卓程序中很简单就可以用上了&#xff0c;应该说是一个标准控件。看了一些例子&#xff0c;但是都不能满足我想在任意位置弹出菜单需求&#xff0c;于是自己在网上找了一个例子…

计算曲线的长度

若一条平面曲线可表达成标准方程 那么它的长度就是&#xff1a; 其中a、b为x的上下限。 若平面曲线可表达成参数方程 那么它的长度就是&#xff1a;