15 个最佳的 jQuery 布局插件【转】
英文原文:15 Best jQuery Grid Plugins for Developers
现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid(流)和自适应性特点。 大多数网站设计要靠margins, guides, rows and columns等网格系统和布局来在网页上组织内容。网格设计常见于报纸和杂志中的文字图像排版设计。 |
围观
|
可以创建网格布局的数量几乎是无限的,并且能够用无数种方式排布。比如:在等间距的两列,三列或者四列网格顶端有一个横跨的header,或者一整页的有着同样外观和感觉的方格。 有一些很好的JQuery网格布局插件能够大幅的缩短开发时间,如果你在你下一个项目中使用的话。这些网格插件能够优化瀑布流,使列的大小可调,滚动数据以匹配header,同样也可以添加数据网格,以及针对网格的一些动作比如:重新调整列的大小,分页,排序,行和列的样式等等。 下面是15款jQuery网格布局插件,能够让开发者和设计师在创建响应式布的网格布局时,同时拥有迷人的视觉效果,以及一个兼容所有浏览器和手持设备的响应式的外观。希望你们能够喜欢! |
tnjin
|
1.自由墙自由墙是一个跨浏览器的响应式jQuery插件,它可以帮助你创建很多不同的网格布局:灵活布局,图片布局,网格,流体网格,metro风格布局还有用CSS3实现的动画效果和回调事件的瀑布流布局。自由墙是一站式的解决方案来在桌面,移动和平板上动态创建网格布局。 它是基于容器的宽(或高)以及单元的宽(或高),同时它会创建一个虚拟的矩阵。扫描矩阵的每一个单元,找到空闲单元并让其为空白区域,之后将一个块元素插入。若果没有块可以匹配的话,它将缩放块来适应(这是选项之一) |
yale8848
|
2. S GalleryS Gallery 是一款 jQuery 图片画廊插件 ,将图片显示在响应式网格。它的灵感来自于Sony’s产品页画廊 (Flash实现) 并完全实现了它的功能。当一个项目获得焦点或被点击时, 可以使用 prev-next 按钮 或使用键盘来浏览其他操作。 单击后会返回网格视图并有一个全屏选项(使用HTML5全屏API). |
围观
|
3. Mason.js创建一个动态列的网格布局(比如Pinterest)有许多javascript方案。虽然大多数都很棒,但有时,这些网格会含有缝隙或者锯齿边缘。Mason.js是一款致力于通过智能填充空隙,力图表现完美网格的jQuery插件。一个网格被创建出来,这款插件会计算空隙的位置并使用预定义的元素或者重复内容填充空隙。元素的大小,列/行的大小,断点以及布局是流式还是固定都是可以被重新定义的。 |
tnjin
|
4.jQuery.Shapeshift有许多jQuery的插件可以创建一个照片分享样式的动态网格布局。jQuery.Shapeshift是一个正是这类插件的强大替代品,通过一个触摸动作,这些图片可以拖曳(需要使用jQuery UI)。拖曳可以影响网格布局,就像网格在需要的时候,会自动去填充空隙一样。这同样在触摸设备和响应式布局上有效。这个插件有许多灵活可变的参数,比如设置margin,启用/禁用拖曳,自定义动画等等。 |
tnjin
|
5. jQuery NestedNested是一款可以生成多列没有空隙的网格布局的jQuery插件。这个插件为所有的元素创建一个矩阵,建立一个多列的网格,并尝试用记录的元素来填充所有空隙。其实有很多解决方案能够达到同样的效果。但是,Nested提供了一个小的动作:它能够重新调整网格底部的任何元素,以确保没有缝隙。它的用法也很简单,只需要给一个jQuery的函数指定容器元素就行。并且,提供了多种可选参数方便用户定制,比如启用/禁用动画,最少列数等 |
tnjin
|
6. Wookmark jQuery Plugin拥有动态列的网格布局如此流行,并不仅仅是因为它们被用于图片分享的网站,更是因为对于不同大小的内容显示来说,这是一个非常棒的方式。Wookmark,Pinterest的替代品,发布了一个可以创建那样布局的jQuery插件,兼容所有的浏览器。目前,这个插件只提供了少量的可选项:容器元素,offset(垂直/竖直距离)和元素的宽度——就这些。在初始化时,它会自己获取窗口的大小并自动排布网格(当然,它也是响应式的布局)。 |
tnjin
|
Grid-A-Licious是一个jQuery插件,可以让你很容易的创建类似Pinterest的浮动表格布局。当然也有其他的插件能够完成这个功能,但Grid-A-Licious提供了更完善的响应式解决方案。不管什么尺寸的屏幕,还是什么设备,表格表现得都很完美,它都能实现浮动而不使用绝对定位。插件提供了自定义宽度、间隔和动画(速度,过渡时间,效果等等)的选项,并且它支持在表格前或后插入新项目,这对于动态布局来说是非常有用的。 |
晴风晓月
|
8. jPhotoGridjPhotoGrid只需要图像和字幕的简单列表,就可以将其变成了可以浏览和放大照片的网格。这个插件几乎所有的样式都是靠CSS完成的。诀窍是通过浮动的列表项来对网格进行布局。而插件会做的第一件事,就是将这些都转换成绝对定位。这就是为什么这个插件可以放大单个图像,然后将其返回到原来的地方。 |
LeoXu
|
9. GridsterGridster是一个令人印象深刻的jQuery插件,是为了开发出一个类iGoogle的多列网格,可以拖动n行删除并重新排序。该插件只需要jQuery(不用jQuery UI),可以将任何给定的HTML构造成网格的部件。而且,不局限于最初加载的元素,它还可以动态的添加新元素和删除现有的元素。 |
LeoXu
|
14. jSquaresjSquares是一个用来弹出悬停图像和说明的jQuery插件。它基本上和在www.ted.com上找到的图像表格相同。调用jSquares时,可以加入一些参数,如字幕大小,图像的透明度,切换速度等。它就在IE6+,FF3+,Safari 3以及Opera10上工作起来很有魅力。 15. jqGridjqGrid是是一个带有神器功能的AjaxedJQuery网格插件。由于网格是一个使用Ajax回调函数加载数据的客户端解决方案,它可以用于任何服务器端语言,如ASP,PHP,ASP.NET,JSP等。它有一个聪明的特性——子网格,可以在调用主列的时候显示一个子网格。 |
15 个最佳的 jQuery 布局插件【转】的更多相关文章
- 15 个最佳的 jQuery 表格插件
现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid(流)和自适应性特点. 大多数网站设计要靠margins, guides, rows ...
- 推荐15款最佳的 jQuery 分步引导插件
当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...
- 有用的jQuery布局插件推荐
网页设计中排版也是很重要的,但有些比较难的网页排版我们可以用一些jQuery来实现,今天文章中主要分享一些有用的jQuery布局插件,有类似Pinterest流布局插件.友荐的滑动提示块以及其它jQu ...
- 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- 15款最好的 jQuery 网格布局插件
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- jQuery 网格布局插件
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- 10个最好的 jQuery 视频插件(转)
在这篇文章中已经收集了 10 个最佳的 jQuery 视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个 jQ ...
- 10个最好的 jQuery 视频插件
在这篇文章中已经收集了10个最佳的jQuery视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个jQuery插 ...
- 15 个最佳 jQuery 翻书效果插件
本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1. BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...
随机推荐
- Kali Linux 1.0 新手折腾笔记(2013.3.21更新)
rootoorotor昨天折腾了 Kali Linux 1.0,把大概的配置过程记录下来,希望对想接触或使用Kali Linux的同学有所帮助. 请注意: 1.本文为面向新手的教程,没技术含量,没事瞎 ...
- css样式表可以被嵌入网页里面吗?
我们一般听说的是:javascript可以被嵌入到网页任何地方? 而我们一直忽略了css也可以嵌入到网页任何地方 不过,建议这种方式少写,为了浏览器的渲染速度,但对于行内样式来说,这种方式还是比较有效 ...
- mysql莫名的主键重复
REPAIR TABLE t_car_type; OPTIMIZE TABLE t_car_type; 可解决问题
- qs库使用
1.npm地址 https://www.npmjs.com/package/qs 2.概述 将url中的参数转为对象: 将对象转为url参数形式 3.示例 import qs from 'qs'; c ...
- MySQL数据库的知识总结
1.Mysql数据库存储引擎 概念:存储引擎其实就是如何实现存储数据,如何为存储的数据建立索引以及如何更新,查询数据等技术实现的方法.MYSQL中的数据用各种不同的技术存储在文件 (内存)中,这些技术 ...
- JS批量获取参数构建JSON参数对象
在做系统的时候,往往查询条件是被严格指定的,大量的查询条件,一两个页面还可以通过dom去一个一个获取,再构建参数对象,请求后台接口. 这里给大家讲一个批量获取前端参数,构建参数对象. <form ...
- Python操作Execl 实现自动化填表
任务简述: 表1是一个简单的数据表,共有110行,25列.第1行是表头,例如“负责人”.“事项”.“期限”等. 第2行——第110行是对应的数据,如“张三”.“搬砖头”.“3天”. 想要做的表(表2) ...
- ReactiveCocoa入门教程——第一部分【转载】
作为一个iOS开发者,你写的每一行代码几乎都是在响应某个事件,例如按钮的点击,收到网络消息,属性的变化(通过KVO)或者用户位置的变化(通过CoreLocation).但是这些事件都用不同的方式来处理 ...
- python创建迅雷批量任务
其实不是真的创建了批量任务,而是用python创建一个文本文件,每行一个要下载的链接,然后打开迅雷,复制文本文件的内容,迅雷监测到剪切板变化,弹出下载全部链接的对话框~~ 实际情况是这样的,因为用py ...
- python升级或者其他原因把yum搞坏了
第一个命令查询出来,原本是安装的啥版本 rpm -qa | grep python- | grep 2.6 然后执行下一个命令,就可以安装原本的python版本了,注意链接要换成你对应的那个版本 rp ...