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使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jquery实现简单自动轮播图效果
Jul 29 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
PHP4.04简明安装
2006/10/09 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
PHP实现的简单缓存类
2015/07/29 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python工厂函数用法实例分析
2018/05/14 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
一份Java笔试题
2012/02/21 面试题
购房协议书
2014/04/11 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
大跃进口号
2014/06/16 职场文书
2014年生产部工作总结
2014/12/17 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL