【精心挑选】15款最好的 jQuery 网格布局插件

「爱情、让人受尽委屈。」 2023-06-02 09:22 6阅读 0赞

如今，大多数网站设计要靠网格系统和布局，这能够提供给设计人员一个方便的途径来组织网页上的内容。网格的设计最常见于报纸和杂志的版面，由文字和图像构成的列组成。

这篇文章给大家分享精心挑选的15款最佳的 [**jQuery**][jQuery] 网格布局插件（jQuery Grid Plugins），它可以帮助你在创建网格布局项目时大大缩短开发时间。

您可能感兴趣的相关文章

*  [精心挑选的美轮美奂的 jQuery 图片特效插件][jQuery 1]
 *  [精心挑选的优秀jQuery Ajax分页插件和教程][jQuery Ajax]
 *  [精心挑选的优秀 jQuery 文本特效插件和教程][jQuery 2]
 *  [8款非常棒的响应式 jQuery 幻灯片插件推荐][8_ jQuery]
 *  [精心挑选12款优秀 jQuery 手风琴插件和教程][12_ jQuery]

### 1. Freewall ###

Freewall 是一个跨浏览器和响应式的 [**jQuery**][jQuery] 插件，以帮助您创建多种类型的网格布局：灵活的布局，图像布局，嵌套网格，流体网格，Metro 风格的布局，Pinterest 风格的布局。Freewal 是集所有功能于一体的解决方案，用于为桌面，移动和平板电脑设备创建动态网格布局。

[![Freewall][]][Freewall 1]

[插件下载][Link 1]     [在线演示][Freewall 1]

### 2. jQuery Nested ###

这款 jQuery 插件用于生成无间隙的多列网格布局。该插件创建一个所有元素的矩阵，构建一个多列网格并通过重新排序元素来填充间隙。它的用法很简单，只需通过一个 [**jQuery**][jQuery] 函数绑定容器元素。

[![jQuery Nested][]][jQuery Nested 1]

[插件下载][Link 2]     [在线演示][jQuery Nested 1]

### 3. Mason.js ###

有很多基于 [**JavaScript**][JavaScript] 的解决方案用于创建动态的列布局（类似 Pinterest 风格）。这些方案都很好，但是实现的网格会包含间隙或粗糙的边缘。Mason.js 这款 [**jQuery**][jQuery] 插件旨在填补这些空白。网格被创建时，这款插件在会计算出存在的间距，并使用预定义的元素或通过复制网格中的内容填充它们。

[![masonjs][]][masonjs 1]

[插件下载][Link 3]     [在线演示][masonjs 1]

### 4. jQuery.Shapeshift ###

jQuery.Shapeshift 是另外一个网格布局插件，让项目可以拖放布局（使用 jQuery UI 实现）。拖放不会对网格布局产生负面影响，因为会在需要的时候自动填补空白。它也适用于触摸设备和响应布局。该插件还有许多选项，可以设置页边距，启用/禁用拖放，自定义动画效果等等。

[![jQueryShapeshift][]][jQueryShapeshift 1]

[插件下载][jQueryShapeshift 1]     [在线演示][jQueryShapeshift 1]

### 5. S Gallery ###

S Gallery 是一款效果精美的 [**jQuery**][JavaScript] 图片库插件，在一个响应式的网格中显示图像。它的灵感来自于索尼的产品页面（使用 Flash 制作的），一旦项目被点击就会重点突出，可以通过上一个、下一个按钮或通过键盘浏览其它图片。

[![s-gallery][]][s-gallery 1]

[插件下载][Link 4]     [在线演示][Link 5]

### 6. Wookmark jQuery Plugin ###

动态列的网格布局如此受欢迎，不仅因为它被 Pinterest 使用，也因为它是使用不同大小显示内容的一个好方法。Wookmark 这款 [**jQuery**][jQuery] 插件用于创建这样的布局，能够在每个浏览器都工作良好。

[![images0-cnblogs-com_blog_36987_201402_260952090917513.jpg][]][images0-cnblogs-com_blog_36987_201402_260952090917513.jpg 1]

[插件下载][Link 6]     [在线演示][images0-cnblogs-com_blog_36987_201402_260952090917513.jpg 1]

### 7. Grid-A-Licious ###

Grid-A-Licious 是林外一款实现网格布局的 [**jQuery**][jQuery] 插件，使我们能够轻松地创建类似 Pinterest 的浮动网格布局。这款插件和其它的不同之处在于提供了一个完全响应解决方案，无论什么样的屏幕大小或设备，网格都能自动适应，因为它是浮动的（没有使用绝对定位）和流体。

[![Grid A Licious][]][Grid A Licious 1]

[插件下载][Link 7]     [在线演示][Grid A Licious 1]

### 8. jPhotoGrid ###

jPhotoGrid 用于把一组图像和字幕变成可以扩展和缩放的照片网格。诀窍是通过浮动列表项来布局网格，当你点击缩略图的时候，可以放大单个图像，关闭时会将其返回到原来的地方。

[![jphotogrid][]][jphotogrid 1]

[插件下载][Link 8]     [在线演示][Link 9]

### 9. Gridster ###

Gridster 是一款令人印象深刻的 [**jQuery**][jQuery] 插件，用于开发类似 iGoogle 的多列网格，可以通过拖放重新排序，建立直观的跨越多个列的拖动布局元素。

[![gridsterjs][]][gridsterjs 1]

[插件下载][Link 10]     [在线演示][Link 11]

### 10. Photoset Grid ###

Photoset Grid 是一款简单的 [**jQuery**][jQuery] 插件，可以用于把图片排布成一个灵活的网格。最初，这款插件是为 Tumblr 主题创建的，用于实现响应式的图片网格布局。

[![images0-cnblogs-com_blog_36987_201402_260952278807256.jpg][]][images0-cnblogs-com_blog_36987_201402_260952278807256.jpg 1]

[插件下载][Link 12]     [在线演示][Link 12]

### 11. Flex ###

Flex 是一个用于实现流体网格动画的 [**jQuery**][jQuery] 插件。当你将鼠标放悬停在图片集上面的时候，图片或扩大。Flex 的灵感来自于 Adidas 的主页。

[![flex-jquery-plugin][]][flex-jquery-plugin 1]

[插件下载][flex-jquery-plugin 1]     [在线演示][flex-jquery-plugin 1]

### 12. Freetile ###

Freetile 能够帮助你组织网页内容，形成动态的、响应式的布局。它可以应用到一个容器元素，它会尝试安排它的子元素，最佳利用屏幕的空间，通过“包装”他们形成紧凑的布局。

[![freetile][]][freetile 1]

[插件下载][freetile 1]     [在线演示][freetile 1]

### 13. Griddy ###

Griddy是一个轻量的 [**jQuery**][jQuery] 插件，能够在任何元素之上创建简单的，自定义的网格布局。它也可以自动根据行/列间隔空间的数量计算行高和列宽。可设置的选项包括：行，行高，列高，列宽，颜色和透明度等。

[![griddy][]][griddy 1]  
[插件下载][Link 13]     [在线演示][Link 14]

### 14. jSquares ###

jSquares 这款 [**jQuery**][JavaScript] 插件用于在鼠标悬停的时候弹出遮罩层显示图像和说明。它和 www.ted.com 上的图像网格基本相同。有一些参数可以在调用 jSquares 的时候加入，例如标题大小，图像的不透明度，切换速度等。

[![jsquares][]][jsquares 1]

[插件下载][Link 15]     [在线演示][Link 16]

### 15. jqGrid ###

jqGrid 这款网格插件有很多特色功能。由于网格是一个客户端解决方案，数据加载使用的是 [**Ajax**][JavaScript] 回调函数，因此它可以用于任何服务器端语言，如 ASP，PHP，ASP.NET，JSP 等等。

[![jqgrid][]][jqgrid 1]

[插件下载][Link 17]     [在线演示][Link 18]

您可能感兴趣的相关文章

*  [期待已久的2013年度最佳 jQuery 插件揭晓][2013_ jQuery]
 *  [小伙伴们都惊呆了！8个超炫的 Web 效果][8_ Web]
 *  [10大流行的 Metro UI 风格 Bootstrap 主题][10_ Metro UI _ Bootstrap]
 *  [推荐35款精致的 CSS3 和 HTML5 网页模板][35_ CSS3 _ HTML5]
 *  [精选12款优秀 jQuery Ajax 分页插件和教程][jQuery Ajax]

本文链接：[15 Best jQuery Grid Plugins for Developers][][  
][Link 19]

编译来源：[梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源][_ _ _]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[jQuery]: http://www.cnblogs.com/lhb25/category/277997.html
[jQuery 1]: http://www.cnblogs.com/lhb25/archive/2012/08/13/jquery-image-effects-plugins.html
[jQuery Ajax]: http://www.cnblogs.com/lhb25/archive/2012/08/08/ajax-jquery-pagination-plugin-tutorial.html
[jQuery 2]: http://www.cnblogs.com/lhb25/archive/2012/08/06/jquery-text-effects-plugins.html
[8_ jQuery]: http://www.cnblogs.com/lhb25/archive/2012/01/31/8-responsive-jquery-slider-plugins.html
[12_ jQuery]: http://www.cnblogs.com/lhb25/archive/2012/08/21/jquery-accordion-tutorials.html
[Freewall]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_Freewall1.jpg
[Freewall 1]: http://vnjs.net/www/project/freewall/
[Link 1]: https://raw.github.com/kombai/freewall/master/freewall.js
[jQuery Nested]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_jQuery-Nested.jpeg
[jQuery Nested 1]: http://suprb.com/apps/nested/
[Link 2]: https://github.com/suprb/nested/
[JavaScript]: http://www.cnblogs.com/lhb25/category/146074.html
[masonjs]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_masonjs.jpeg
[masonjs 1]: http://masonjs.com/
[Link 3]: https://github.com/DrewDahlman/Mason
[jQueryShapeshift]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_jQueryShapeshift.jpeg
[jQueryShapeshift 1]: http://mcpants.github.io/jquery.shapeshift/
[s-gallery]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_s-gallery1.jpg
[s-gallery 1]: http://sarasoueidan.com/blog/s-gallery/
[Link 4]: https://github.com/SaraSoueidan/s-gallery
[Link 5]: http://sarasoueidan.com/demos/s-gallery
[images0-cnblogs-com_blog_36987_201402_260952090917513.jpg]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/images0-cnblogs-com_blog_36987_201402_260952090917513.jpg
[images0-cnblogs-com_blog_36987_201402_260952090917513.jpg 1]: http://www.wookmark.com/jquery-plugin
[Link 6]: https://github.com/GBKS/Wookmark-jQuery
[Grid A Licious]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_Grid-A-Licious.jpeg
[Grid A Licious 1]: http://suprb.com/apps/gridalicious/
[Link 7]: https://github.com/suprb/Grid-A-Licious
[jphotogrid]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_jphotogrid.jpg
[jphotogrid 1]: http://www.gethifi.com/blog/jphotogrid
[Link 8]: http://files.www.gethifi.com/blog/jphotogrid.zip
[Link 9]: http://www.gethifi.com/demos/jphotogrid
[gridsterjs]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_gridsterjs.jpeg
[gridsterjs 1]: http://gridster.net/
[Link 10]: http://gridster.net/#download
[Link 11]: http://gridster.net/#demos
[images0-cnblogs-com_blog_36987_201402_260952278807256.jpg]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/images0-cnblogs-com_blog_36987_201402_260952278807256.jpg
[images0-cnblogs-com_blog_36987_201402_260952278807256.jpg 1]: http://stylehatch.github.com/photoset-grid/
[Link 12]: http://stylehatch.github.io/photoset-grid/
[flex-jquery-plugin]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_flex-jquery-plugin.jpg
[flex-jquery-plugin 1]: http://jsonenglish.com/projects/flex/
[freetile]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_freetile.jpg
[freetile 1]: http://yconst.com/web/freetile/
[griddy]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_griddy.jpeg
[griddy 1]: http://devgrow.com/griddy-overlay/
[Link 13]: http://devgrow.com/griddy/griddy.js
[Link 14]: http://devgrow.com/griddy/
[jsquares]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_jsquares.jpeg
[jsquares 1]: http://boedesign.com/blog/2009/10/22/jsquares-for-jquery/
[Link 15]: http://github.com/jboesch/jSquares
[Link 16]: http://boedesign.com/demos/jsquares
[jqgrid]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/codegeekz-com_wp-content_uploads_jqgrid.jpeg
[jqgrid 1]: http://www.trirand.com/blog/
[Link 17]: http://www.trirand.com/blog/?page_id=6
[Link 18]: http://www.trirand.com/blog/?page_id=5
[2013_ jQuery]: http://www.cnblogs.com/lhb25/p/best-jquery-plugins-of-2013.html
[8_ Web]: http://www.cnblogs.com/lhb25/p/8-amazing-codepen-demos.html
[10_ Metro UI _ Bootstrap]: http://www.cnblogs.com/lhb25/archive/2013/04/11/10-metro-bootstraps-ui-templates.html
[35_ CSS3 _ HTML5]: http://www.cnblogs.com/lhb25/archive/2012/08/03/5-creative-html5-and-css3-templates.html
[15 Best jQuery Grid Plugins for Developers]: http://codegeekz.com/jquery-grids/
[Link 19]: http://www.cnblogs.com/lhb25/p/smarter-sticky-elements-with-jquery.html
[_ _ _]: http://www.cnblogs.com/lhb25/