什么是 azami？
azami 是一个用于在浏览器中显示日本式的图片瀑布流的 npm 包。它是基于 Masonry 的 JavaScript 库实现的，同时还支持可定制化的样式和过滤器。
安装 azami
使用 npm 进行安装：
npm install azami
引入 azami
你可以将 azami 引入你的项目中，例如：
import Azami from 'azami';
或者可以像下面这样简单地将其引入到 HTML 文件中：
<script src="/path/to/azami.js"></script>
使用 azami
azami 提供了一个 Azami 类，可以用于在浏览器中展示瀑布流画廊。下面我们来看一个简单的示例：
const azami = new Azami('.gallery', {
gutter: 10,
columnWidth: '.grid-sizer',
itemSelector: '.item',
percentPosition: true,
});
azami.init();其中，第一个参数 .gallery 是瀑布流容器的选择器，它包含了所有瀑布流元素。剩下的参数用于定制瀑布流的样式和功能。
参数说明
gutter
gutter 用于设置瀑布流元素之间的间隙。可以是一个数字或者字符串，支持 px、em、% 和 rem。默认值为 0。
columnWidth
columnWidth 用于设置每一列的宽度。可以是一个数字、字符串或者 DOM 元素的选择器。默认值为 null，这种情况下 azami 将自适应列宽。
itemSelector
itemSelector 用于指定瀑布流元素的选择器。默认值为 .item。
percentPosition
percentPosition 用于设置是否使用百分比来定位瀑布流元素。默认值为 false。
transitionDuration
transitionDuration 用于设置瀑布流元素在进行交互式排版时的动画持续时间（以秒为单位）。默认值为 0.4。
filterSelector
filterSelector 可用于添加用于筛选或移除元素的选择器。它可以是一个选择器字符串或一个函数。默认值为 null。
sortAscending
sortAscending 用于控制筛选器筛选时的排序顺序。默认值为 true。
过滤器
使用 azami，你可以轻松地添加筛选器和搜索机制，以帮助你的用户浏览瀑布流。下面是一个过滤器示例：
-- -------------------- ---- -------
----- --------- - -----------------------------------
----- ------------- - -----------------------------------------
-- ------------
------------------------------- -- -
----------------------------------- -- -- -
----- ----------- - -------------------------
--------------------------
---
---
-- ------
------------ - --------------------- -
-------------------------------------
-- --------
------------------------
-- ----
----------------
-- --------
------------- -- -
------------------------
----------------------------------------
-- ------
--在上面的示例代码中，我们首先为页面中的过滤器按钮添加了事件监听器，当用户单击筛选器按钮时，将使用 azami.filter 方法执行筛选器操作。该方法使用 azami.show 和 azami.hide 方法来筛选瀑布流元素，并在过滤器操作完成后更新样式。
结束语
通过本文的学习，我们了解了如何在项目中引用 npm 包 azami 并使用其进行日本式的图片瀑布流展示，包括参数的介绍和过滤器的使用。希望这篇文章能够帮助你更好地了解 azami，并让你的项目展示更加生动有趣。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a1881e8991b448d7bba