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 相关文章推荐
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
js异步编程小技巧详解
Aug 14 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
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
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
Flask-WTF表单的使用方法
2019/07/12 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python类共享变量操作
2020/09/03 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
会计实习自我鉴定
2013/12/04 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
Python基本数据类型之字符串str
2021/07/21 Python