推荐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 相关文章推荐
javascript实现的listview效果
Apr 28 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
js字符编码函数区别分析
Dec 28 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
vue递归获取父元素的元素实例
Aug 07 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
一个简单至极的PHP缓存类代码
2015/10/23 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
Javascript 布尔型分析
2008/12/22 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
python实现狄克斯特拉算法
2019/01/17 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
培训心得体会
2013/12/29 职场文书
专家推荐信模板
2014/05/09 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
五四演讲稿范文
2014/09/03 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python