分享一个jQuery动态网格布局插件:Masonry(转)
Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用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 :
});
});
<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.item {
width: 220px;
margin: 10px;
float: left;
}
如果你加载的元素中有图片的话,那么需要确保Masonry在所有图片都加载完后才执行,需要调用如下代码:
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth :
});
});
分享一个jQuery动态网格布局插件:Masonry(转)的更多相关文章
- 分享一个JQuery弹出层插件
JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...
- jQuery动态网格瀑布流插件Masonry
Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...
- jQuery Masonry-让你的网页更自然的强大的动态不规则布局插件!
Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用M ...
- 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- jQuery 网格布局插件
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- 15款最好的 jQuery 网格布局插件
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- 基于jQuery图片元素网格布局插件
基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览 源码下载 实现的代码. html代码: <c ...
- jQuery mobile网格布局
3.4 内容格式化 jQuery Mobile中提供了许多非常有用的工具与组件,如多列的网格布局.折叠形的面板控制等,这些组件可以帮助开发者快速实现正文区域内容的格式化. 3.4.1 网格布局 jQu ...
- jQuery 动态标签生成插件
前言: 最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jQuery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法.高深的语法几乎没有,就有一 ...
随机推荐
- UI特效--Android利用ViewFlipper实现屏幕切换动画效果
.屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面:一个个性化设置页面.2.介绍ViewFilpper类ViewFl ...
- 16、编写适应多个API Level的APK
确认您是否需要多apk支持 当你试图创建一个支持跨多代android系统的应用程序时,很自然的 你希望你的应用程序可以在新设备上使用新特性,并且不会牺牲向后兼 容.刚开始的时候认为通过创建多个ap ...
- 动画 -- ListView列表item逐个出来(从无到有)
import android.app.ListActivity; import android.os.Bundle; import android.widget.ArrayAdapter; publi ...
- Windows 窗体最小化和隐藏的区别及恢复
应用程序有托盘图标,窗体最小化或者隐藏窗体时,点击托盘图标需要恢复窗体显示,并且恢复之前的现实状体,正常大小或者最大化显示.例如:最大化显示窗体时,点击最小化按钮,窗体最小化,点击托盘图标将最大化显示 ...
- 软件测试技术(三)——使用因果图法进行的UI测试
目标程序 较上次增加两个相同的输入框 使用方法介绍 因果图法 在Introduction to Software Testing by Paul一书中,将软件测试的覆盖标准划分为四类,logical ...
- Ubuntu 14.04配置FTP服务器
搭建: 1.sudo apt-get update #更新软件 2.sudo apt-get install vsftpd ...
- duilib中控件拖拽功能的实现方法(附源码)
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际 ...
- asmcmd报错
在进入asm的命令行时报错: 报错内容如下 [oracle@kel dbs]$ asmcmd asmcmd: command disallowed by current instance type 从 ...
- PHP中我经常容易混淆的三组函数
原文:http://www.ido321.com/1252.html 一.htmlentities() 和htmlspecialchars() 1.htmlentities() 1.1 功能:把字符 ...
- Unity3D文件读写
这里主要是简单的文件读写,不推荐使用,最好用的还是PlayerPrefs. using UnityEngine; using System.Collections; using System.IO; ...