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 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
详解jQuery事件
Jan 13 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
全面解析JavaScript Module模式
Jul 24 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
PHP提取中文首字母
2008/04/09 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
python3中str(字符串)的使用教程
2017/03/23 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
python 实现矩阵按对角线打印
2019/11/29 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
如何清空python的变量
2020/07/05 Python
python中doctest库实例用法
2020/12/31 Python
HashMap和Hashtable的区别
2013/05/18 面试题
毕业生的自我鉴定
2013/10/29 职场文书
办公设备采购方案
2014/03/16 职场文书
揭牌仪式主持词
2014/03/19 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
公司节能减排方案
2014/05/16 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB