【精心挑选】15款最好的 jQuery 网格布局插件（Grid Plugins）
如今，大多数网站设计要靠网格系统和布局，这能够提供给设计人员一个方便的途径来组织网页上的内容。网格的设计最常见于报纸和杂志的版面，由文字和图像构成的列组成。
这篇文章给大家分享精心挑选的15款最佳的 jQuery 网格布局插件（jQuery Grid Plugins），它可以帮助你在创建网格布局项目时大大缩短开发时间。
1. Freewall
Freewall 是一个跨浏览器和响应式的 jQuery 插件，以帮助您创建多种类型的网格布局：灵活的布局，图像布局，嵌套网格，流体网格，Metro 风格的布局，Pinterest 风格的布局。Freewal 是集所有功能于一体的解决方案，用于为桌面，移动和平板电脑设备创建动态网格布局。
2. jQuery Nested
这款 jQuery 插件用于生成无间隙的多列网格布局。该插件创建一个所有元素的矩阵，构建一个多列网格并通过重新排序元素来填充间隙。它的用法很简单，只需通过一个 jQuery 函数绑定容器元素。
3. Mason.js
有很多基于 JavaScript 的解决方案用于创建动态的列布局（类似 Pinterest 风格）。这些方案都很好，但是实现的网格会包含间隙或粗糙的边缘。Mason.js 这款 jQuery 插件旨在填补这些空白。网格被创建时，这款插件在会计算出存在的间距，并使用预定义的元素或通过复制网格中的内容填充它们。
4. jQuery.Shapeshift
jQuery.Shapeshift 是另外一个网格布局插件，让项目可以拖放布局（使用 jQuery UI 实现）。拖放不会对网格布局产生负面影响，因为会在需要的时候自动填补空白。它也适用于触摸设备和响应布局。该插件还有许多选项，可以设置页边距，启用/禁用拖放，自定义动画效果等等。
5. S Gallery
S Gallery 是一款效果精美的 jQuery 图片库插件，在一个响应式的网格中显示图像。它的灵感来自于索尼的产品页面（使用 Flash 制作的），一旦项目被点击就会重点突出，可以通过上一个、下一个按钮或通过键盘浏览其它图片。
6. Wookmark jQuery Plugin
动态列的网格布局如此受欢迎，不仅因为它被 Pinterest 使用，也因为它是使用不同大小显示内容的一个好方法。Wookmark 这款 jQuery 插件用于创建这样的布局，能够在每个浏览器都工作良好。
7. Grid-A-Licious
Grid-A-Licious 是林外一款实现网格布局的 jQuery 插件，使我们能够轻松地创建类似 Pinterest 的浮动网格布局。这款插件和其它的不同之处在于提供了一个完全响应解决方案，无论什么样的屏幕大小或设备，网格都能自动适应，因为它是浮动的（没有使用绝对定位）和流体。
8. jPhotoGrid
jPhotoGrid 用于把一组图像和字幕变成可以扩展和缩放的照片网格。诀窍是通过浮动列表项来布局网格，当你点击缩略图的时候，可以放大单个图像，关闭时会将其返回到原来的地方。
9. Gridster
Gridster 是一款令人印象深刻的 jQuery 插件，用于开发类似 iGoogle 的多列网格，可以通过拖放重新排序，建立直观的跨越多个列的拖动布局元素。
10. Photoset Grid
Photoset Grid 是一款简单的 jQuery 插件，可以用于把图片排布成一个灵活的网格。最初，这款插件是为 Tumblr 主题创建的，用于实现响应式的图片网格布局。
11. Flex
Flex 是一个用于实现流体网格动画的 jQuery 插件。当你将鼠标放悬停在图片集上面的时候，图片或扩大。Flex 的灵感来自于 Adidas 的主页。
12. Freetile
Freetile 能够帮助你组织网页内容，形成动态的、响应式的布局。它可以应用到一个容器元素，它会尝试安排它的子元素，最佳利用屏幕的空间，通过“包装”他们形成紧凑的布局。
13. Griddy
Griddy是一个轻量的 jQuery 插件，能够在任何元素之上创建简单的，自定义的网格布局。它也可以自动根据行/列间隔空间的数量计算行高和列宽。可设置的选项包括：行，行高，列高，列宽，颜色和透明度等。
14. jSquares
jSquares 这款 jQuery 插件用于在鼠标悬停的时候弹出遮罩层显示图像和说明。它和 www.ted.com 上的图像网格基本相同。有一些参数可以在调用 jSquares 的时候加入，例如标题大小，图像的不透明度，切换速度等。
15. jqGrid
jqGrid 这款网格插件有很多特色功能。由于网格是一个客户端解决方案，数据加载使用的是 Ajax 回调函数，因此它可以用于任何服务器端语言，如 ASP，PHP，ASP.NET，JSP 等等。
本文链接：15 Best jQuery Grid Plugins for Developers
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
【精心挑选】15款最好的 jQuery 网格布局插件（Grid Plugins）的更多相关文章
- 15款最好的 jQuery 网格布局插件
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- jQuery 网格布局插件
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- 推荐15款最佳的 jQuery 分步引导插件
当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...
- 15款最好的 jQuery Modal（模态窗口）插件
jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...
- 分享一个jQuery动态网格布局插件：Masonry(转)
在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排 ...
- 分享8款精美的jQuery图片播放插件
本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究.废话不多说了,直接上这些插件. 1.3D轮播相册 这款3D相册插件利用了HTML5 ...
- 基于jQuery图片元素网格布局插件
基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览 源码下载 实现的代码. html代码: <c ...
- 10款最新CSS3/jQuery菜单导航插件
这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...
随机推荐
- android rectF
new Rect(left , top, right , bottom) 这个构造方法需要四个参数这四个参数 指明了什么位置 ?我们就来解释怎么画 这个 矩形 这四个 参数 分别代表的意思是:left ...
- ZOJ3805Machine(二叉树左右子树变换)
/* 题意:建立一棵二叉树,左子树和父节点占一个宽度,右子树另外占一个宽度! 使任意左右子树交换顺序,使得整个树的宽度最小! 思路:递归交换左右子树 ! 开始写的代码复杂了,其实左右子树不用真的交换, ...
- 可变参数宏__VA_ARGS__
在 GNU C 中,宏可以接受可变数目的参数,就象函数一样,例如:#define pr_debug(fmt,arg...) \printk(KERN_DEBUG fmt,##arg) 用可变参数宏(v ...
- WebStorm 9 配置 Live Edit 功能与浏览器实现同步
1. 打开Chrome浏览器,点击右上角的“自定义及控制”按钮,选择“更多工具”-->”扩展程序”,打开“扩展程序”页面. 其实以上步骤可以简化为:用Chrome打开chrome://exten ...
- LESS-Middleware：Node.js 和 LESS 的完美搭配
LESS 是一个编写 CSS 的很好的方式 ,让你可以使用变量,嵌套规则,混入以及其它许多有用的功能,它可以帮助您更好地组织你的 CSS 代码. 最近我一直在研究 Node.js ,并想用 less- ...
- js页面跳转整理
js页面跳转整理 js方式的页面跳转1.window.location.href方式 <script language="javascript" type=" ...
- 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法
关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...
- NET RichTextBox控件如何可以插入图像
本文介绍.NET RichTextBox控件如何可以插入图像,控制和ActiveX对象通过使用OLE方式,如在解释,.不幸的是,它涵盖了只用一个C源代码样本,所以我需要在托管代码(C#)实施类似的解决 ...
- [开源 .NET 跨平台 数据采集 爬虫框架: DotnetSpider] [一] 初衷与架构设计
[DotnetSpider 系列目录] 一.初衷与架构设计 二.基本使用 三.配置式爬虫 四.JSON数据解析与配置系统 为什么要造轮子 同学们可以去各大招聘网站查看一下爬虫工程师的要求,大多是招JA ...
- html5画布的旋转效果
keleyi.htm的代码如下: <!DOCTYPE HTML> <html> <head> <title>html旋转画布-柯乐义</title ...