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

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

用法

首先倒入类库,如下:

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

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

  1. $(function(){
  2. $('#container').masonry({
  3. // options
  4. itemSelector : '.item',
  5. columnWidth : 240
  6. });
  7. });

html代码

  1. <div id="container">
  2. <div class="item">...</div>
  3. <div class="item">...</div>
  4. <div class="item">...</div>
  5. ...
  6. </div>

css

  1. .item {
  2. width: 220px;
  3. margin: 10px;
  4. float: left;
  5. }

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

  1. var $container = $('#container');
  2. $container.imagesLoaded(function(){
  3. $container.masonry({
  4. itemSelector : '.item',
  5. columnWidth : 240
  6. });
  7. });

jQuery Masonry-让你的网页更自然的强大的动态不规则布局插件!的更多相关文章

  1. 分享一个jQuery动态网格布局插件:Masonry(转)

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

  2. Salvattore:CSS 驱动的 jQuery Masonry 插件

    Salvattore 是一个 jQuery 砌体的替代,使用 CSS 驱动的配置.Salvattore 根据您指定的列数组织你的 HTML 元素.容器中的每一个项目会一个接一个被放置在列内,只需要简单 ...

  3. 瀑布流插件(jquery.masonry.js)

    什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jqu ...

  4. 用 jQuery Masonry 插件创建瀑布流式的页面(转)

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  5. 用 jQuery Masonry 插件创建瀑布流式的页面

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  6. 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  7. jQuery检查某个元素在网页上是否存在

    jQuery选择器有比较完善的处理机制,用jQuery获取网页中不存在的元素也不会报错,值得注意的是,利用$('#tt')获取的永远是对象,即使网页上没有此元素.当使用jQuery检查某个元素在网页上 ...

  8. 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)

    [jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...

  9. 50个实用的jQuery代码段让你成为更好的Web前端工程师

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...

随机推荐

  1. 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1

    [ASP.NET Core]EF Core - “影子属性”   有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...

  2. 开启Win7多用户登录远程桌面

    原文链接: http://blog.sina.com.cn/s/blog_7e5da5b101014fc4.html 多用户登陆破解:(支持win7 x86 & win7x64)在 Windo ...

  3. VirtualBOX 不能mount优盘,移动硬盘解决方案

    The Solution (basically nayasis' solution with the second driver installation added): Safely unplug ...

  4. 使用SplashScreenManager控件定制程序加载页面

    需要devexpress版本在12.0及以上才支持 https://www.cnblogs.com/wuhuacong/p/6112461.html 在DevExpress程序中使用SplashScr ...

  5. ES6 class setTimeout promise async/await 测试Demo

    class Person { async getVersion () { return new Promise((resolve, reject) => { setTimeout(functio ...

  6. git版本控制文件提交到composer应用市场,并下载用市场的软件库

    要把github中的项目提交到composer中去,必须在github管理的项目中新建对应的composer.json文件, composer.json文件建立的方法 cmd定位到项目目录 compo ...

  7. opencv源代码之中的一个:cvboost.cpp

    我使用的是opencv2.4.9.安装后.我的cvboost..cpp文件的路径是........\opencv\sources\apps\haartraining\cvboost.cpp.研究源代码 ...

  8. Linux 共享库(动态库)

    Linux 系统上有两类根本不同的 Linux 可执行程序.第一类是静态链接的可执行程序.静态可执行程序包含执行所需的所有函数 — 换句话说,它们是“完整的”.因为这一原因,静态可执行程序不依赖任何外 ...

  9. 【Android】4.0 Android项目的基本结构

    分类:C#.Android.VS2015: 创建日期:2016-02-06: 修改日期:2016-02-27 一.简介 第3章虽然通过百度地图应用展示了你可能感兴趣的内容,但是,如果你是一个初学者,一 ...

  10. HDU 4670 Cube number on a tree ( 树的点分治 )

    题意 : 给你一棵树 . 树的每一个结点都有一个权值 . 问你有多少条路径权值的乘积是一个全然立方数 . 题目中给了你 K 个素数 ( K <= 30 ) , 全部权值都能分解成这k个素数 思路 ...