jQuery Masonry-让你的网页更自然的强大的动态不规则布局插件!
Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用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
- });
- });
jQuery Masonry-让你的网页更自然的强大的动态不规则布局插件!的更多相关文章
- 分享一个jQuery动态网格布局插件:Masonry(转)
在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排 ...
- Salvattore:CSS 驱动的 jQuery Masonry 插件
Salvattore 是一个 jQuery 砌体的替代,使用 CSS 驱动的配置.Salvattore 根据您指定的列数组织你的 HTML 元素.容器中的每一个项目会一个接一个被放置在列内,只需要简单 ...
- 瀑布流插件(jquery.masonry.js)
什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jqu ...
- 用 jQuery Masonry 插件创建瀑布流式的页面(转)
瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...
- 用 jQuery Masonry 插件创建瀑布流式的页面
瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...
- 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...
- jQuery检查某个元素在网页上是否存在
jQuery选择器有比较完善的处理机制,用jQuery获取网页中不存在的元素也不会报错,值得注意的是,利用$('#tt')获取的永远是对象,即使网页上没有此元素.当使用jQuery检查某个元素在网页上 ...
- 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...
- 50个实用的jQuery代码段让你成为更好的Web前端工程师
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
随机推荐
- 编码规范:Eclipse Code Templates设置
现在的项目一般都是一个团队共同开发,而每个人都有自己的编码习惯,为了统一格式,项目组在项目开发之前都会制定一系列的规范.设置Code Templates的目的主要是为了统一各种注释的格式以及代码的模板 ...
- RTB竞价中的cookie mapping技术
首先通过一些关键词解释普及或者回顾一下背景, ADX: Ad exchange的简称.一般特指Ad exchange平台模块 DMP: Data Management Platform的简称.DMP存 ...
- 【Android】3.16 离线地图功能
分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 百度地图目前已经支持矢量离线地图数据的下载.更新. 使用离线地图,可满足在无网络环境下查看地图信息的 ...
- 【Android】3.15 短串分享功能
分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 短串分享是指,用户搜索查询后得到的每一个地理位置结果将会对应一条短串(短链接),用户可以通过短信.邮 ...
- CCNotificationCenter(二)---NotificationCenterTest
//类的定义 #ifndef __NOTIFICATIONCENTERTEST_H__ #define __NOTIFICATIONCENTERTEST_H__ #include "coco ...
- .NET Garbage-Collectors
http://mattwarren.org/tags/#Garbage-Collectors https://github.com/dotnet/coreclr/issues https://lldb ...
- 图解TCP/IP笔记-网络基础知识
1.计算机网络发展的7个阶段1)批处理服务器一次只能处理一批程序指令2)分时服务器可以分时为多台客户端服务3)计算机之间通信计算机之间由通信线路连接,互相通信4)计算机网络的产生通过分组交换技术,在不 ...
- Django---ORM操作大全
前言 Django框架功能齐全自带数据库操作功能,本文主要介绍Django的ORM框架 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MyS ...
- 【转】PNG文件结构
本文转自:http://blog.csdn.net/bisword/article/details/2777121 前言 我们都知道,在进行J2ME的手机应用程序开发的时候,在图片的使用上,我们可以 ...
- angularJS绑定数据中对标签转义的处理二 与pre标签的使用
一.问题 默认情况下,angularJS绑定的数据为字符串文本,不会对其中包含的html标签进行转义生成格式化的文本.在实际工作时碰到接口返回的数据带有html格式时该如何处理. 二.解决办法 1.引 ...