文档章节

分享一个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

没有更多内容

加载失败,请刷新页面

加载更多

linux查询日志命令总结

【背景】 排查线上环境问题,少不了去线上查日志。而使用什么命令,能快速准确地查到我们需要查找地日志信息,也是我们需要掌握的一项技能。 【命令】 Linux查看命令有多种:tail,head,cat...

chen-chen-chen
16分钟前
1
0
net/http 接收文件

代码展示,如何使用golang 自带net/http,将Form表单中提交上来的文件,指定位置保存。 ReadHtmlFile OutHtml(html网页,表单测试代码使用) SaveFile (处理提交文件) package mainimport...

听夜深窗外风
20分钟前
1
0
c++ 强制类型转换

强制类型转换 p545

天王盖地虎626
23分钟前
2
0
再读Golang中的异常处理

一起重温Golang中的异常处理啊😸 1.Golang语言中没有其他语言中的try...catch...语句来捕获异常和异常恢复 2.在Golang中我们通常会使用panic关键字来抛出异常,在defer中使用recover来捕获...

Andy-xu
42分钟前
7
0
TiDB 最佳实践系列(三)乐观锁事务

作者:Shirly TiDB 最佳实践系列是面向广大 TiDB 用户的系列教程,旨在深入浅出介绍 TiDB 的架构与原理,帮助用户在生产环境中最大限度发挥 TiDB 的优势。我们将分享一系列典型场景下的最佳实...

TiDB
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部