jQuery通常是大多数想在JavaScript编程中扎根的人的首选，因为jQuery提供了一种选择HTML元素和操作DOM的简便方法。 根据W3Techs的最新统计数据 ，jQuery非常流行，“我们知道JavaScript库的所有网站中有95.4％使用了jQuery。”
许多JavaScript库也将jQuery用作依赖项，并且新的主要发行版jQuery 3.0的Alpha版本已经存在。 如果您的项目以任何方式使用jQuery，并且您想要一个动态，灵活的设计布局 ，则值得考虑的是在您的前端堆栈中包括一个jQuery网格插件。
jQuery Grids如何工作？
jQuery网格使您可以为网站创建类似Pinterest的布局。 它们像虚拟矩阵一样工作，遵循“盒子里的盒子”的原则。 jQuery网格动态地计算出最佳的项目排列方式，并以最小的空白空间填充项目，就像您在这些框中看到的那样。
与CSS网格相比，jQuery网格的主要优点是它们可以处理具有不同宽度和高度的图像或其他媒体元素。 酷炫JavaScript效果也是使用jQuery网格创建现代布局的重要原因。
在这篇文章中，您可以了解当前市场上最有趣的10个jQuery网格 -当然，就像jQuery一样，所有这些都是开源和免费的。
1. jQuery嵌套
jQuery Nested为您提供了方便的多列网格布局，该布局具有响应能力并且可以在各种设备上使用。 这个jQuery插件宣称自己是完全无间隙的。 最初，这个口号听起来像是一种廉价的营销技巧，但实际上，正如其创建者所承诺的那样，该插件可以很好地实现无间隙。
jQuery Nested在填充网格矩阵时遵循一个独特的脚本。 首先，它创建一个多列网格，然后扫描矩阵中的间隙，并通过对不同元素进行重新排序来填充它们。 最后，这是使网格无间隙的步骤，它调整了底行中任何不适合间隙的元素的大小。
2.自由墙
Freewall允许您创建所需的布局，无论是图像网格，嵌套网格，砖石结构还是都市风格的网格。 它具有许多可以设置为JavaScript变量的选项，例如gutterX，gutterY，动画，cellW，cellH等。它具有自定义事件（例如onGapFound和onResize ）以及自定义方法。
您可以在他们的网站上找到不错的代码示例。 开发人员还关心仍然需要为旧版浏览器设计的穷人，因此Freewall支持Internet Explorer 8，并且它还提供了针对禁用JavaScript的解决方案 ，因为它使用CSS 3动画作为JS后备策略 。 在此处查看有关Freewall的文章。
3.砌体
每位经验丰富的设计师都必须熟悉旧砖石的名字。 如果您还没有听说过，Masonry是一个级联的网格布局库 ，可同时使用jQuery和Vanilla JavaScript。
这个方便的插件是许多流行的WordPress主题的基础。 您甚至不必将其上传到服务器，因为您可以轻松地直接从CDN链接库。
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js">Masonry可能是最完善的jQuery网格，这就是为什么它有很多选择的原因。 您可以使用Bower或Node Package Manager轻松安装它 。 您可以借助其帮助实现不同的网格布局 ，还可以设置许多自定义变量 ， 方法和事件 。
4.网格化
Gridify是一个轻量级JavaScript插件，不仅可以与jQuery一起使用，还可以与纯JavaScript一起使用。 该页面提到它也可以与YUI库一起使用，但是由于YUI的开发已中止 ，因此不再是一种选择。
Gridify以类似Pinterest的方式“布局”您的布局。 它支持加载的事件，动态计算项目宽度 ，处理高度非常高的项目，并可以通过CSS 3过渡制作动画 。
从最新版本开始，您还可以将Gridify与Require JS JavaScript文件和模块加载器一起使用。
5.变形
Shapeshift是一个非常酷的拖放式jQuery网格系统 。 用户可以在整个页面上拖放元素， 每次移动项目时 ，Shapeshift都会将元素重新组织到新位置 。
拖动事件将更改元素在其父容器内的索引位置。 这样Spacespace 不会破坏子元素的逻辑索引系统 。 认真地，在他们的演示网站上尝试一下，它效果很好。
Shapeshift还巧妙地利用了jQuery UI Touch Punch应用程序，因此在支持触摸的设备上也能很好地工作。
6. jQuery Portfolio
如果您想设计一个时尚的投资组合网站，那么jQuery Portfolio插件是一个不错的选择。 作者最初是为自己的投资组合站点设计的，但后来使其成为一个开源项目。
您可以设置网格中的列数和所需的jQuery过渡效果 。 jQuery Portfolio插件也具有响应能力，因此您不必担心使用移动设备的访问者的用户体验。
7. jQuery MatchHeight
jQuery MatchHeight插件允许您使用特殊的jQuery网格， 使所有选定元素的高度完全相等 。 MatchHeight自动匹配同一组中元素的高度，并巧妙地处理浮动元素和包装 。 您可以使用此插件将项目放置在可爱的直线行中。
您既可以使用最大高度作为基准，也可以定义特定的目标元素，MatchHeight将确保其他元素不会大于该高度。 它还具有一个数据API，使您可以使用HTML 5文件中的内联<script>标记内的数据属性 。
8.照像格
您喜欢Tumblr的Photoset功能吗？ 然后，为您设计了Photoset Grid jQuery插件。 这个方便的前端工具基于前面提到的photoset功能将图像排列成一个灵活的网格 。 该插件的原始版本是为Tumblr主题创建的，但开发团队决定为设计师提供机会在自己的设计中使用该插件。
如果要将Photoset Grid添加到自己的Tumblr主题中，它们具有自定义代码段，您可以将其嵌入代码中。 该插件最酷的功能可能是可以在图像网格中添加Lightbox 。 您可以通过单击其中一张照片在此处进行尝试。
9.随机播放
您是否想过一个灵活的图像网格，使您能够对项目进行分类，排序和过滤 ？ 如果是，则肯定需要尝试Shuffle 。 这个插件的结果非常漂亮，特别是因为它对页面加载具有很酷的随机播放效果。
可以将项目添加到多个组中，以后用户可以按组对它们进行过滤 ，因此可以提供出色的用户体验。 该插件为图像添加了细微的标题 ，列出了该项目所属的类别。 您可以借助JavaScript变量设置许多选项，例如随机播放效果的速度，装订线的宽度，列的宽度等等。
10. jQuery网格化
对于想在支持触摸的设备上实现基于网格的布局的人来说， jQuery Gridly是一个明智的选择。 该插件允许用户在屏幕上拖放项目。 拖放和调整大小功能也都对触摸屏手势做出React 。
用户可以关闭自己不喜欢的图像，并且在关闭图像后，会根据很酷的效果重新排列布局 。 将jQuery Gridly与Ruby on Rails应用程序集成起来很容易，因为它也已注册为Rails Asset 。
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
