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

jQuery Grids是怎样工作的?

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

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

1. jQuery Nested

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

2. Freewall

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

3. Masonry

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

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

4. Gridify

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

5. Shapeshift

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

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

本站文章除注明转载外，均为本站原创或翻译