推荐25个超炫的jQuery网格插件


Posted in Javascript onNovember 28, 2014

jQuery 网格插件可以让你创建各种各样的表格布局,网格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery的网格插件,你可以任意控制网格的行和列,用文本和图片进行填充。我用了顶级的来形容这个些插件,我可以肯定你了解它们之后会觉得很酷。

 1. Gridify

推荐25个超炫的jQuery网格插件

Gridify是轻量级的 jQuery 插件,用来创建一个类似 Pinterest 图片加载网格插件。支持图像加载事件,支持窗口缩放事件,支持非常长的高度项,支持动态项宽度,支持动画 (CSS3 transition)。

 2. Freewall

推荐25个超炫的jQuery网格插件

Freewall是一个跨浏览器和响应式的jQuery插件,以帮助您创建多种类型的网格布局:灵活布局,图像布局,嵌套网格,流体网格,Metro风格布局,类似于pinterest的布局...。此外还拥有漂亮的CSS3动画效果和回调事件。 Freewall是所有功能于一身的解决方案。可以为桌面,移动和平板创建动态的网格布局。

 3. Responsive Equal Height Blocks

推荐25个超炫的jQuery网格插件

Responsive Equal Height Blocks是用JavaScript和CSS实现的。 它实际上是把一上列表按每一行来展示,通过每一行中最高的条目来设置和其它条目的位置。

 4. MatchHeight.js

推荐25个超炫的jQuery网格插件

MatchHeight.js能使所有选定元素的高度正好相等。这是一个更强大的相同高度的插件,正确处理混合填充,边距,边框,框的大小,行,组。 它通过在需要的时候自动更新图像处理和响应式布局。

 5. Gridmanager.js

推荐25个超炫的jQuery网格插件

Gridmanager允许你在表格布局中创建、记录、更新、删除行和列,创建可编辑区域的网格布局,每一个网格可编辑定义大小和数量以及调整它的位置。GridManager需要jQuery、jQueryUI和Bootstrap 3.x,可选TinyMCE CKeditor。

 6. S Gallery

推荐25个超炫的jQuery网格插件

S Gallery是一个jQuery图片集的插件,它在响应式的表格中展示这你的图片。它的灵感来自于Sony的产品,当一个条目被选中,界面中会出现选择前一个/后一个的按钮,你也可以通过点击其它位置回到整体的表格布局中。

 7. Elastic Columns

推荐25个超炫的jQuery网格插件

Elastic Columns是一个轻量级响应式网格布局插件,可以非常容易的按照宽度值来定义网格,监测浏览器的大小自适应网格显示。

 8. Mason.js

推荐25个超炫的jQuery网格插件

Mason.js是一个jQuery插件,巧妙地填充了网格的间隙。当创建一个网格时候,插件就开始计算这些间隙,然后就使用预定义的元素或是在网格中复制的内容来填充这些间隙。可以定义用于元素的大小,列/行的大小,断点的大小,或者布局是流动还是固定的。

 9. rowGrid.js

推荐25个超炫的jQuery网格插件

RowGrid.js 是个非常小的,轻量级的 jQuery 插件,可以对图像进行直排,而且是响应式的,可以无限滚动阅览。

 10. BttrLazyLoading

推荐25个超炫的jQuery网格插件

BttrLazyLoading是一款响应式图像延迟加载的 jQuery 插件,允许用户的 web 应用延迟图片的加载直到图像滚动。BttrLazyLoading 提供四种不同的屏幕大小版本: 手机 (<768px), 平板 (≥768px), 桌面 (≥992px) 和大型的桌面 (≥1200px)。

 11. jqGrid

推荐25个超炫的jQuery网格插件

jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。

 12. Masonry

推荐25个超炫的jQuery网格插件

Masonry是一款很好用的jquery网页布局插件,它可以去掉不同高度div之间的空白,让你的网页看上去更加的整齐、漂亮!

 13. jQuery Shapeshift

推荐25个超炫的jQuery网格插件

jQuery拖拽插件Shapeshift,拖放可以重新排列在一个容器或甚至将在多个物品使容器变形。拖动元素周围可以改变他们的索引位置在它们的父容器。

 14. jQuery Nested

推荐25个超炫的jQuery网格插件

Nested是一个帮助你创建多列的,动态的网格布局,和其它的类似的类库或者jQuery插件不一样,它帮助你去掉所有的间隙。使用这个插件它将帮助你扫描所有的间隙的尺寸,以便重新排序元素,这和其它的类库或者插件类似,但是Nested最后一步会帮助你缩放元素,以便消除所有的间距。

 15. Headsup Grid

推荐25个超炫的jQuery网格插件

Headsup Grid的特点是它可以在不同的平台上显示出不同的风格。

 16. Wookmark jQuery Plugin

推荐25个超炫的jQuery网格插件

Wookmark jQuery plugin 是一个用来实现现在很流行的瀑布流的网页布局效果的 jQuery 插件。

 17. jQuery Waterfall

推荐25个超炫的jQuery网格插件

jQuery Waterfall是用li标签制作多列瀑布流布局鼠标滚动页面图片无限加载效果。

 18. Grid ?A-Licious

推荐25个超炫的jQuery网格插件

Grid-A-Licious 是一个简单易用的 jQuery 插件,可用于创建响应式瀑布流布局,针对不同设备可自动适应宽度。你可以通过参数设置它的宽度以及动态显示时的速度、延迟等等,定制性是比较高的。

 19. Gridster

推荐25个超炫的jQuery网格插件

gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素。

 20. Gridly

推荐25个超炫的jQuery网格插件

Gridly是个网格式的拖放移位jQuery插件,这个插件交互不错,我们在拖动的时候会显示一些移动动画,效果很好看。

此插件还有其它特色功能,比如关闭、点击放大、增加模块等等。

 21. College Plus

推荐25个超炫的jQuery网格插件

CollagePlus是一个jQuery表格插件,你可以定义图片之间的距离,通过CSS给它们加边框。

 22. Griddy

推荐25个超炫的jQuery网格插件

Griddy是一个轻量级的插件,但是它能实现几乎所有的效果,很多属性是可选的,比如行数、行高、列数、列高、颜色等等……

 23. jQuery Grid'Em Plugin

推荐25个超炫的jQuery网格插件

jqGridView是新的,富客户端的,基于XML , Ajax网格插件的jQuery库。 jqGridView提供专业的解决方案,代表和编辑表格数据在网络上。精心设计的,具有强大的脚本API的,这可编辑网格是很简单的DHTML与XML 的配置,并显示出令人信服的成果与大量数据。 jqGridView可以轻松地执行好期待(管理通过的CSS ) 。 jqGridView并不平台根据插件,它可用于不同的网络编程平台,如: ASP技术.NET /的ASP , PHP中,爪哇岛, CGI脚本等jqGridView已高度鲍泽兼容性。

 24. Ingrid

推荐25个超炫的jQuery网格插件

Ingrid在数据填充的操作上做了很多的简化,看上去更接地气一些。

 25. Jui_datagrid

推荐25个超炫的jQuery网格插件

jui_datagrid 是一个 Ajax 的 jQuery 表格插件,可用于操作表格数据,通过简单和强大的 API 进行主题定制、本地化支持等。

via:gbtags

以上25款jQuery网格布局插件,能够让开发者和设计师在创建响应式布的网格布局时,同时拥有迷人的视觉效果,以及一个兼容所有浏览器和手持设备的响应式的外观。希望你们能够喜欢!

Javascript 相关文章推荐
js判断变量是否未定义的代码
Mar 28 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 #Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 #Javascript
jquery+php实现搜索框自动提示
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 #Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 #Javascript
You might like
抓取YAHOO股票报价的类
2009/05/15 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python struct模块解析
2014/06/12 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
会计系毕业求职信
2014/08/07 职场文书
优秀党员个人总结
2015/02/14 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
导游词之包公祠
2019/11/25 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript