彩票走势图

10个最有趣的jQuery Grid插件(1/2)

原创|行业资讯|编辑:郑恭琳|2015-09-01 14:37:40.000|阅读 1479 次

概述:jQuery为广大用户提供了一种简单的方法来选择HTML元素和操作DOM,并且能更加动态、更加灵活的前端布局。下面为大家介绍一下10大最有趣的jQuery网格插件。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

jQuery为广大用户提供了一种简单的方法来选择HTML元素和操作DOM,并且能更加动态、更加灵活的前端布局,据统计有95.4%的网站使用jQuery。

jQuery Grids是怎样工作的?

jQuery的网格可以为你的网站创建像Pinterest一样的布局。它像一个虚拟矩阵一样工作,并且遵循“箱内嵌”原则。 jQuery的网格动态计算出什么是项目最好的安排以及填充页面的方式,使的空白空间最少,如下图。

jQuery网格工作原理

相比的CSS网格jQuery网格的主要优点是,它们支持图像或其它具有不同宽度和高度的媒体元素。下面介绍目前市场上10个最迷人的jQuery网格插件-当然和jQuery一样都是开源和免费的。

1. jQuery Nested

jQuery Nested提供了一个方便的多列网格布局响应,并支持所有设备类型。该jQuery插件可以说是完全无间隙的,在间隙自由度上处理得堪称完美。
jQuery Nested在填充表格矩阵中遵循独特的脚本。首先,创建了一个多列格,然后扫描矩阵间隙,并通过重新排序不同的元素来填充它们。最后-也就是使得该网格无间隙的步骤-调整在底行中与间隙不正确匹配的任何元素。

jQuery Nested

2. Freewall

Freewall允许创建你想要无论是图像的网格、嵌套网格或Metro风格的网格布局。它有许多像JavaScript变量一样可以设置的选项,如gutterX、gutterY、动画、cellW、cellH等。它还有自定义事件,如onGapFound和onResize,以及自定义方法。

Freewall

3. Masonry

Masonry这个名字对于一些非常有经验的设计师来说已经再熟悉不过了。如果你还不了解,Masonry是既适用于jQuery又适用于vanilla JavaScript的级联网格布局库。
该插件以许多流行的WordPress主题为基础。你甚至不需要把它上传到你的服务器,就可以轻易直接从CDN链接到库。

Masonry可以说是建立得最好的jQuery网格,这就是为什么它有很多的选项的原因。你可以人容易在Bower或Node Package Manager上安装它。有了它的帮助你可以实现不同的网格布局,以及设置多个自定义变量、方法和事件。

Masonry

4. Gridify

Gridify是一个轻量级的JavaScript插件,即可与jQuery又可与纯JavaScript一起使用。
Gridify像Pinterest一样布局。它支持加载事件,动态计算项目的宽度,并且处理具有非常长的高度的项目,还可通过CSS3的转换制作动画。

Gridify

5. Shapeshift

Shapeshift是一个非常酷的拖拽jQuery网格系统。用户可以在整个页面上拖拽元素,元素每一次移动Shapeshift都为它们重组一个新的位置。
拖动事件在父容器中改变元素的索引位置。这样Spaceshift就不会使子元素的逻辑索引系统混乱。

Shapeshift

Shapeshift在触摸设备上同样有效,因为它巧妙地利用了jQuery UITouch Punch应用程序。

翻译自:转载请注明本文转载自慧都控件网


标签:JavaScript jQuery

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP