文档章节

分享一个jQuery动态网格布局插件:Masonry

gbin1
 gbin1
发布于 2011/12/08 20:40
字数 372
阅读 252
收藏 4

日期:2011/12/01  来源:GBin1.com

分享一个jQuery动态网格布局插件:Masonry

在线演示

Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列元素,然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。如下:

分享一个jQuery动态网格布局插件:Masonry

在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小。

Javascript

首先倒入类库,如下:

<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
  });
});

Masonry可提供相关选项方法,具体请参考官方网站。

原文来自:分享一个jQuery动态网格布局插件:Masonry

© 著作权归作者所有

gbin1
粉丝 87
博文 722
码字总数 275571
作品 0
东城
私信 提问
10款帮助你设计超酷响应式布局的jQuery插件

日期:2012/02/24 来源:GBin1.com 如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇。 相对于传统的页面设计来说,今天的设计者需要...

gbin1
2012/02/25
8.2K
2
[分享]2010年最佳jQuery插件

文章来源:http://www.ackarlix.com/2010/12/04/460 在前两周国外知名博客WDL先后分享了“2010最佳系列”中的“最佳免费WordPress主题”和“最佳免费字体”, 在这个星期又发布了2010年最佳j...

Ackarlix
2010/12/04
2.4K
6
我淘到的各种jQuery Grid网格插件

如今,绝大多数网站都要依靠网格来进行布局,拥有一些好的Grid网格布局插件能大大地节约开发时间,还能在满足响应式布局的同时拥有迷人的外观。接下来,小编带大家来认识15款非常棒的响应式j...

lanmeimei
2014/03/05
555
0
6款强大的jQuery插件 创建和加强网站布局

Javascript 打开了web设计的大门,给了Html和CSS更宽广的舞台。HTML5和CSS3,又比从前进步了一大截。神奇的根源来自JavaScript,它可以向你的网站布局中加入交互元素。以jQuery Masonry为例,...

小卒过河
2011/06/01
4.2K
4
8 个神奇的动态 Web 布局以及制作方法

本文向你介绍一些神奇的 Web 网页的排版方式,同时在文章的下半部分还包含如何实现这些效果。 案例 Gimme Bar MKSD Architects Marken Film Cascade Brewery Co Pixillion Swinton Dynamit P...

小编辑
2011/06/21
5.4K
8

没有更多内容

加载失败,请刷新页面

加载更多

Activity启动模式二

上篇文章Activity启动模式一主要介绍了Activity的四种启动模式,这些启动模式都是在AndroidManifest中进行配置的。除此之外,Android系统还通过Intent类提供了一些标志位,同样可以指定Activ...

ltlovezh
29分钟前
4
0
三原色还原

1、Color Filter Array — CFA 随着数码相机、手机的普及,CCD/CMOS 图像传感器近年来得到广泛的关注和应用。 图像传感器一般都采用一定的模式来采集图像数据,常用的有 BGR 模式和 CFA 模式...

天王盖地虎626
40分钟前
3
0
kubernetes pod exec接口调用

正文 一般生产环境上由于网络安全策略,大多数端口是不能为集群外部访问的。多个集群之间一般都是通过k8s的ApiServer组件提供的接口通信,如https://192.168.1.101:6443。所以在做云平台时,...

码农实战
今天
8
0
3_数组

3_数组

行者终成事
今天
8
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部