npm 包 viskan-deku-packery 使用教程
在前端开发中，Packery 是一种流体网格布局语言，可以让你以一种漂亮的方式对元素进行排列。而 viskan-deku-packery 就是一个使用了 Packery 的 npm 包。在本篇文章中，我们将会介绍 viskan-deku-packery 的使用方式，包括如何安装、如何使用、以及如何优化。
安装
在使用之前，我们需要通过 npm 来安装这个包。在控制台输入以下命令：
npm install viskan-deku-packery --save
使用
HTML
首先，我们需要在 HTML 中添加以下代码，以引入必要的 CSS 和 JS 文件：
-- -------------------- ---- -------
--------- -----
------
------
---- -- --------------- ---
----- ---------------- --------------------------------------------------------------------------- --
-------
------
---- -------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
------
---- -- -------------- ---
------- -----------------------------------------------------------------------------------
---- -- ---------------------- ---
------- ----------------------------------------------------------------------------
-------
-------Init Packery & Init Viskan-Deku-Packery
接下来，在 JS 中，我们需要初始化 Packery 和 Viskan-Deku-Packery：
-- -------------------- ---- ------- -- --- ------- --- ---- - -------------------------------- --- ----- - --- ------------- - -- ---------- --- -- --- ------------------- --- ------- - --- ------------------------ - -- ---------- ---
在上面的代码中，我们首先通过 .querySelector() 选择了我们的 grid 元素，并通过 new Packery(grid, options) 来初始化了 Packery，并将其结果赋值给 pckry。然后，我们使用 new ViskanDekuPackery(pckry, options)，将 pckry 作为第一个参数传入来初始化 Viskan-Deku-Packery 并将其结果赋值给 vdpckry。
Options
在上面的代码中，我们传入了一些选项。这里是一些可用的选项：
-- -------------------- ---- -------
--- ------- - -
-- ----------------- ----------
---------- ----
----------- ----
------- ---
-------------- ----
---------- --
------------- ---
------------------ ----
---------------- --------------
-------------- ------------
------------------- ---------------------------------
----------------- -
----- --
----- --
--
-------- -
--- ------
------ --
--
------- -
--- ------
--------- -----
--
------ -
----------- -------
--------- ------
--
-- ------- ----------
------------- -------------
------------ --------------
---------------- -----
--Methods
一旦初始化完成，我们可以使用下面的方法来控制我们的布局。
// 添加新的 item vdpckry.add(item); // 从布局中移除一个元素 vdpckry.remove(item); // 重新布局 vdpckry.layout(); // 销毁 Viskan-Deku-Packery 实例 vdpckry.destroy();
以上是一些常用的方法，完整的 API 可以在 viskan-deku-packery 的官方文档 中找到。
优化
Resize
在浏览器大小发生变化时，我们可能需要重新调整布局以适应新的大小。viskan-deku-packery 提供了一个 resize 方法，可以帮助我们实现这个目标：
window.addEventListener('resize', function() {
// Wait for resize to end
clearTimeout(this.resizeTimeout);
this.resizeTimeout = setTimeout(function() {
vdpckry.resize();
}, 100);
});在上面的代码中，我们添加了一个 resize 事件监听器，并在这个监听器中使用了 setTimeout() 来等待浏览器调整完成。然后，我们使用 vdpckry.resize() 来调整布局。
Infinite Scroll
如果我们想要实现无限滚动加载，我们可以使用 Infinite Scroll 来自动加载更多元素时调用“add”方法：
-- -------------------- ---- ------- -- ------- --- --------- - --- ----------------------- - -- -------- ------ ---------- ----- ------------- -- ---------- --- ------- ------------- -- ---------- -------- ------ --- -- -- --------- -------------- -------------------- ------------------ ----- - -- -------- ---------- --- ----- - ------------------- ------------------- -- ------------ ----------------- ---
在上面的代码中，我们首先初始化了 Infinite Scroll，并在 on('load') 事件监听器中调用了 vdpckry.add() 来添加新元素，然后手动进行了重新布局以适应这些新元素。
示例代码
最后，以下是一个完整的示例代码，可以让您更好地了解 viskan-deku-packery 的使用方式：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
-------------------------- ------------
---- -- --------------- ---
----- ---------------- --------------------------------------------------------------------------- --
-------
-- ----- --
----- -
---------- ------
------- - -----
-
---------- -
----------------- --------
------- --- ----- --------
-------------- ----
------ --------
---------- ----
------------ -----
-------- -----
----------- -------
-
--------
-------
------
---- -------------
---- ---------------------------------------- ---
---- --------------- ---
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
------
---- -- -------------- ---
------- -----------------------------------------------------------------------------------
---- -- ---------------------- ---
------- ----------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------------
--------
-- --- -------
--- ---- - --------------------------------
--- ----- - --- ------------- -
------------- -------------
------------ --------------
---------------- -----
---
-- --- -------------------
--- ------- - --- ------------------------ -
---------- ----
----------- ----
------- --
-------------- ----
---------- --
------------- ---
------------------ ----
---------------- --------------
-------------- ------------
------------------- ---------------------------------
----------------- -
----- --
----- --
--
-------- -
--- ------
------ --
--
------- -
--- ------
--------- -----
--
------ -
----------- -------
--------- ------
--
---
-- -------
--- --------- - --- ----------------------- -
----- -------------
------- -------------
-------- ------
---
-- -- --------- --------------
-------------------- ------------------ ----- -
--- ----- - -------------------
-------------------
-- ------------
-----------------
---
-- -------- ------ --
--------------------------------- ---------- -
---------------------------------
------------------ - --------------------- -
-----------------
-- -----
---
-- ------ ---- -------
-------- ------------------ -
--- ----- - ---
--- ---- - - -- - - ---------------- ---- -
--- ---- - ------------------------------
--------------------------------
---------------- - ------------------
-----------------
-
------ ------
-
---------
-------
-------上面这段代码提供了一个带有无限滚动加载的示例，您可以根据需要进行修改和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005592a81e8991b448d69ce