在线演示

Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列元素,然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。如下:

在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小。

Javascript

首先倒入类库,如下:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/path/to/jquery.masonry.min.js"></script>

然后,针对元素容器执行masonry,如下:

$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth :
});
});
<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.item {
width: 220px;
margin: 10px;
float: left;
}

如果你加载的元素中有图片的话,那么需要确保Masonry在所有图片都加载完后才执行,需要调用如下代码:

var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth :
});
});

下 载 jquery.masonry.js

下 载 jquery.masonry.min.js

Masonry可提供相关选项方法,具体请参考官方网站。

分享一个jQuery动态网格布局插件:Masonry(转)的更多相关文章

  1. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

  2. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  3. jQuery Masonry-让你的网页更自然的强大的动态不规则布局插件!

    Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用M ...

  4. 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  5. jQuery 网格布局插件

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  6. 15款最好的 jQuery 网格布局插件

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  7. 基于jQuery图片元素网格布局插件

    基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览   源码下载 实现的代码. html代码: <c ...

  8. jQuery mobile网格布局

    3.4 内容格式化 jQuery Mobile中提供了许多非常有用的工具与组件,如多列的网格布局.折叠形的面板控制等,这些组件可以帮助开发者快速实现正文区域内容的格式化. 3.4.1 网格布局 jQu ...

  9. jQuery 动态标签生成插件

    前言: 最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jQuery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法.高深的语法几乎没有,就有一 ...

随机推荐

  1. UI特效--Android利用ViewFlipper实现屏幕切换动画效果

    .屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面:一个个性化设置页面.2.介绍ViewFilpper类ViewFl ...

  2. 16、编写适应多个API Level的APK

     确认您是否需要多apk支持 当你试图创建一个支持跨多代android系统的应用程序时,很自然的 你希望你的应用程序可以在新设备上使用新特性,并且不会牺牲向后兼 容.刚开始的时候认为通过创建多个ap ...

  3. 动画 -- ListView列表item逐个出来(从无到有)

    import android.app.ListActivity; import android.os.Bundle; import android.widget.ArrayAdapter; publi ...

  4. Windows 窗体最小化和隐藏的区别及恢复

    应用程序有托盘图标,窗体最小化或者隐藏窗体时,点击托盘图标需要恢复窗体显示,并且恢复之前的现实状体,正常大小或者最大化显示.例如:最大化显示窗体时,点击最小化按钮,窗体最小化,点击托盘图标将最大化显示 ...

  5. 软件测试技术(三)——使用因果图法进行的UI测试

    目标程序 较上次增加两个相同的输入框 使用方法介绍 因果图法 在Introduction to Software Testing by Paul一书中,将软件测试的覆盖标准划分为四类,logical ...

  6. Ubuntu 14.04配置FTP服务器

    搭建: 1.sudo apt-get update                                        #更新软件 2.sudo apt-get install vsftpd ...

  7. duilib中控件拖拽功能的实现方法(附源码)

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际 ...

  8. asmcmd报错

    在进入asm的命令行时报错: 报错内容如下 [oracle@kel dbs]$ asmcmd asmcmd: command disallowed by current instance type 从 ...

  9. PHP中我经常容易混淆的三组函数

    原文:http://www.ido321.com/1252.html 一.htmlentities() 和htmlspecialchars() 1.htmlentities() 1.1  功能:把字符 ...

  10. Unity3D文件读写

    这里主要是简单的文件读写,不推荐使用,最好用的还是PlayerPrefs. using UnityEngine; using System.Collections; using System.IO; ...