在很多网站中，瀑布流布局已经不再是新鲜事物了。它们往往被用来展示不同大小和类型的图片、视频和其他类型的媒体内容。wookmark-node 是一个 Node.js 模块，提供了一个快捷、轻量级的方式来创建瀑布流布局。
安装和使用
wookmark-node 可以在 Node.js 和浏览器端都可以使用。在 Node.js 中安装和使用该模块，只需要运行以下命令：
npm install wookmark-node
之后，在你的项目中引入该模块：
const Wookmark = require('wookmark-node');在浏览器端使用 Wookmark，需要在 HTML 文件中引入该模块：
<script src="https://unpkg.com/wookmark-node"></script>
它会初始化一个全局的 Wookmark 对象，可以在你的 JavaScript 代码中使用。
基本用法
wookmark-node 的主要功能是将元素按照瀑布流布局排列。假设你有一堆图片需要排列，如下：
-- -------------------- ---- ------- ---- ------------ ---- ----------------- -- ---- ----------------- -- ---- ----------------- -- ---- ----------------- -- ---- ----------------- -- ---- ----------------- -- ---- ----------------- -- ---- ----------------- -- ---- ----------------- -- ---- ------------------ -- ------
可以使用以下代码，使用 wookmark-node 来排列图片：
-- -------------------- ---- ------- ----- --------- - ---------------------------------- ----- ------- - - ----------- ----- ---------- ---------- ------- --- ---------- ---- -- ----- -------- - --- ------------------- ---------
这会产生以下效果：
配置参数
wookmark-node 的 Wookmark 构造函数接收一个配置对象。以下是该对象的主要选项：
container: 瀑布流布局所在的容器元素。offset: 每个元素之间的水平和垂直间隙。itemWidth: 每个元素的宽度。flexibleWidth: 允许一行中的元素宽度不同。align: 在一行中的元素右对齐、居中对齐还是左对齐。resizeDelay: 智能重置延迟。handleWidth: 询问每个元素是否应为一个独立项的回调函数。如果元素的宽度大于等于 handleWidth，它将被视为独立项。ignoreInactiveItems: 启用/禁用对非活动项的计算。
这些选项可以用来调整布局效果。
事件
wookmark-node 允许注册一些事件来监听布局的变化。以下是所有可用事件的详细列表：
resize: 当窗口大小改变时触发。refresh: 当布局被刷新时触发。change: 当元素的大小或位置发生变化时触发。
在 Wookmark 实例上，可以使用以下代码注册这些事件：
-- -------------------- ---- ------- --------------------- ---------- - ----------------------- --- ---------------------- ---------- - --------------------- --- --------------------- -------------- - -------------------------- ------ ---
示例代码
在下面的示例代码中，我们将使用 wookmark-node 来瀑布流布局若干张图片。这里我们使用了一个 jQuery 插件，用于加载图片：
<div id="images"></div>
-- -------------------- ---- -------
----- --------- - ----------------------------------
-------- -------------- --------- -
----- --- - --- --------
---------- - -- -- --------------
------- - ----
-
--------------------------- -----------------------------------
-- ---------
----- ------ - -
-----------------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------------
------------------------------------------
--
--- ------------ - --
-------------------- -- -
-------------- ----- -- -
-- ------
----- ---- - ------- ----------------------------------
--------------------------
------------ -- --
-- ------------- --- -------------- -
--------------------------------------
-- --------
----- -------- - --- ------------------- -
----------- -----
---------- ----
------- ---
---
-
---
---在上面的例子中，我们首先使用了一个 jQuery 插件来加载图片，然后创建图片元素，使用 Wookmark 来布局这些元素。创建图片元素是一个异步过程，只有所有图片被加载完成后才能够触发布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671128dd3466f61ffe4cf