在前端开发中，我们经常需要实现布局的自适应以及动态拖拽等功能。而 npm 包 packery 就是一个非常方便实现这些功能的工具。
安装 packery
使用 npm 安装 packery 很简单，只需要执行以下命令即可：
--- ------- ------- ------
初始化 Packery 布局
HTML 结构
首先，在 HTML 中，我们需要准备好需要排列的元素。例如：
---- ------------- ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ------
其中，.grid 是包含所有排列元素的容器，.grid-item 是各个排列元素。
JavaScript 代码
接下来，在 JavaScript 中，我们需要实例化 Packery，并将 .grid 元素传入：
----- ---- - -------------------------------- ----- ------- - --- ------------- - -- ------- ---
在初始化时，还可以设置一些选项，例如：
----- ------- - --- ------------- - ------------- ------------- ------- --- ---
这里，itemSelector 指定了要排列的元素选择器，gutter 是元素之间的间距。
实现自适应布局
使用 Packery 可以很方便地实现自适应布局。在初始化时，只需要设置 columnWidth 和 rowHeight 选项即可。
----- ------- - --- ------------- - ------------- ------------- ------- --- ------------ ---- ---------- ---- ---
这里，columnWidth 指定列宽，rowHeight 指定行高。
当然，如果你想实现更加灵活的自适应布局，也可以使用 percentPosition: true 选项。
----- ------- - --- ------------- - ------------- ------------- ------- --- ---------------- ----- ---
在这种情况下，元素的宽度会根据容器的大小进行百分比计算。
实现拖拽排序
使用 Packery 还可以很方便地实现拖拽排序功能。只需要设置 draggable 选项为 true 即可。
----- ------- - --- ------------- - ------------- ------------- ------- --- ---------- ----- ---
此外，还可以使用 dragItemSelector 选项指定要拖拽的元素选择器。
----- ------- - --- ------------- - ------------- ------------- ------- --- ---------- ----- ----------------- -------------------- ---
总结
通过本文的介绍，我们学习了如何使用 npm 包 packery 实现自适应布局和拖拽排序功能。实际上，packery 还有很多其他的选项和方法，大家可以根据需要进行探索和使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/33801