jQuery Masonry瀑布流插件使用详解


Posted in Javascript onNovember 17, 2014

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

jQuery Masonry瀑布流插件使用详解

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

用法

首先倒入类库,如下:

<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 : 240    

  });    

}); 

html代码

<div id="container">    

  <div class="item">...</div>    

  <div class="item">...</div>    

  <div class="item">...</div>    

  ...    

</div> 

css

.item {    

  width: 220px;    

  margin: 10px;    

  float: left;    

} 

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

var $container = $('#container');    

$container.imagesLoaded(function(){    

  $container.masonry({    

    itemSelector : '.item',    

    columnWidth : 240   
Javascript 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
JS实现分页导航效果
Feb 19 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
javascript将url中的参数加密解密代码
Nov 17 #Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 #Javascript
PHP PDO操作总结
Nov 17 #Javascript
JavaScript函数详解
Nov 17 #Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 #Javascript
详解Javascript 装载和执行
Nov 17 #Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 #Javascript
You might like
MySQL相关说明
2007/01/15 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
PHP打印输出函数汇总
2016/08/28 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
javascript 节点排序 2
2011/01/31 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
企划主管岗位职责
2013/12/12 职场文书
社区工作者先进事迹
2014/01/18 职场文书
心理健康教育制度
2014/01/27 职场文书
校园之声广播稿
2014/01/31 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
新书发布会策划方案
2014/06/09 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang