5个最好的网格布局设计器jQuery和JavaScript插件

本文概述

• 5. Layout Grid
• 4. jQuery Gridly
• 3. jQuery Shapeshift
• 2. Muuri
• 1. Gridstack.js
• Packery

仪表板无处不在, 但是并非所有仪表板都像其他仪表板一样酷。仪表板允许用户将小部件从一个位置移动到另一个位置, 并且此配置保存在某处, 并在用户每次回来时再次呈现, 这是可以在管理应用程序中实现的最佳功能之一。对你来说幸运的是, 你可以使用开源插件在几分钟内实现在项目上实现此类功能。

遗憾的是, 没有足够的插件可以帮助你实现此功能, 但是你可能会发现它们不够好, 这就是为什么我们为你收集了5个最不重要的插件来开始使用动态, 可调整大小和可修改的插件的原因仪表板。

5. Layout Grid

Github

Layout Grid是具有纯CSS的jQStatic响应网格。 Javascript使用本机拖放在桌面和移动设备上针对每个屏幕尺寸重新排序。

Layout Grid是一个插件, 可让你使用纯CSS构建静态响应网格, 并使用Javascript提供本机拖放支持, 以针对台式机和移动设备上的每个屏幕尺寸重新排序。

4. jQuery Gridly

Github

Gridly是一个jQuery插件, 它允许你初始化可以通过拖放以及在网格上调整大小来修改的布局。

3. jQuery Shapeshift

Github

受jQuery Masonry插件的大力启发, Shapeshift是一个插件, 它将动态地将元素集合排列到类似于Pinterest的列网格系统中。与众不同的是, 它能够在网格内拖放项目, 同时仍为每个项目保持逻辑索引位置。这样, 只要子元素的顺序正确, 每次使用Shapeshift时, 网格就可以完全相同地呈现。该库提供：

• 拖放重新排列容器中的项目, 甚至在多个启用了Shapeshift的容器之间拖动项目。拖动元素会物理改变其在父容器中的索引位置。重新加载页面时, 只要按照正确的顺序放置子元素, 网格就会看起来完全一样。

• 可在触摸设备上使用Shapeshift使用jQuery UI Draggable / Droppable获得有关拖放系统的帮助。幸运的是, 已经有一个名为jQuery Touch Punch的插件, 它为jQuery UI D / D提供触摸支持。可以在供应商文件夹中找到它。

• 多宽度元素2.0中的一项新功能是添加可以跨越多列的元素的功能, 只要它们的宽度是通过CSS正确设置的即可。

• 响应式网格默认情况下处于启用状态, Shapeshift将侦听窗口调整大小事件, 并根据其父容器提供的空间排列其中的元素。

2. Muuri

Github

Muuri是一种神奇的JavaScript布局引擎, 可让你构建各种布局, 并使它们具有响应性, 可排序, 可过滤, 可拖动和/或动画化。与那里的情况相比, Muuri是Packery, 石工, 同位素和Sortable的组合。 Muuri的默认” First Fit”箱式装箱布局算法生成的布局类似于Packery和Masonry。该实现很大程度上基于JukkaJylänki在他的研究《千方百计的装箱方法》中描述的” maxrects”方法。如果那不是你的理想之选, 那么你始终可以提供自己的布局算法, 以根据需要定位商品。 Muuri使用Web动画为其内部动画引擎提供动力, 并使用Hammer.js处理拖动。如果你想知道图书馆的名称” muuri”是芬兰的意思是一堵墙。插件功能：

• 完全可定制的布局
• 拖放(即使在网格之间)
• 嵌套网格
• 快速动画
• 筛选
• 排序

1. Gridstack.js

该项目最初被称为gridster.js, 最初被开发人员放弃, 但是由于库本身的潜力, 该项目被radiolips和trolee所采用, 在Github上创建了Gridstack组, 你现在可以在其中找到Gristack项目, 这是一个维护的分支。是世界上许多开发人员使用的原始库的一部分。 Gridstack.js是一个用于移动设备的Javascript库, 用于仪表板布局和创建。制作拖放式多列仪表板从未如此简单。 gridstack.js允许你构建可拖动的响应式Bootstrap v3友好布局。它也可以与敲除.js, angular.js, 余烬一起使用。

要使用Gridstack, 你将需要至少具有以下组件的jQuery UI(> = 1.12.0)：Core, Widget, Mouse, Draggable, Resizable。

Packery

Packery是一个JavaScript库和jQuery插件, 可实现无间隙且可拖动的布局。它使用bin打包算法来填补空白。包装厂的布局可以智能地排序或有机地排列。元素可以被压印到位, 适合特定位置或在周围拖动。非常适合可拖动的仪表板和无缝的Masonry图片库。

如果你知道另一个很棒的jQuery / JavaScript插件来构建可拖动的网格布局, 请在注释框中与社区共享。