jQuery Masonry瀑布流布局神器使用详解


Posted in jQuery onMay 25, 2017

最近在做个网站时,其中有一部分涉及到很多图片布局,想采用比较流行的Water Flow布局。

开始的时候自己动手写的,真费事情,没有考虑检测图片大小,虽然也能达到布局效果,但是图片有的本身尺寸比较小却被强行拉大了,看起来很不和谐。后来上网收了一下,原来有很好的Water Flow布局工具使用。下面来认识一下这个神器吧~
神器名称:JQuery Masonry , 网址:http://masonry.desandro.com/index.html

使用方法相当简单:

1、标记需要布局的容器和Item

Masonry需要一个容器来装载结构类似的子元素

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

然后在页面中添加Jquery和Masonry脚本引用,要求jquery版本在1.6+

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

2、编写CSS

所有需要布局的元素大小由CSS来确定,所有元素必须是浮动的
eg:

.item { 
 width: 220px; 
 margin: 10px; 
 float: left; 
}

3、编写脚本

编写脚本传入初始化布局参数,让容器自动布局。
强烈推荐配置itemSelector和columnWidth两个参数。更多参数配置请查阅官网。

$(function(){ 
 $('#container').masonry({ 
  // options 
  itemSelector : '.item', 
  columnWidth : 240 
 }); 
});

OK,到此结束。So easy~

看看效果吧

jQuery Masonry瀑布流布局神器使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 #jQuery
jquery.masonry瀑布流效果
May 25 #jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 #jQuery
jquery Form轻松实现文件上传
May 24 #jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
You might like
PHP 木马攻击防御技巧
2009/06/13 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
php制作简单模版引擎
2016/04/07 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
ant design实现圈选功能
2019/12/17 Javascript
react 生命周期实例分析
2020/05/18 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
Python中字符串对齐方法介绍
2015/05/21 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
详解python配置虚拟环境
2019/04/08 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
最新教师自我评价分享
2013/11/12 职场文书
小学开学典礼主持词
2014/03/19 职场文书
财产保全担保书范文
2014/04/01 职场文书
城市创卫标语
2014/06/17 职场文书
男性健康日的活动方案
2014/08/18 职场文书
前台接待岗位职责
2015/02/03 职场文书
湘江北去观后感
2015/06/15 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server