什么是 npm 包 cloth？
npm 包 cloth 是一个能让你的网页上的元素拥有布料般自然浮动的库，它完全由 JavaScript 编写，支持使用 npm 安装，并支持各种主流浏览器。
如何使用 cloth？
安装
使用 npm 可以轻松安装 cloth：
--- ------- -----
使用
在 HTML 中引入 cloth 的 CSS 文件：
----- ---------------- -----------------------
然后再引入 cloth 的 JavaScript 文件：
------- ------------------------------
现在，我们可以使用 cloth 将目标元素浮动起来了。考虑以下的 HTML 代码：
---- -------------- ---- ----------------- ---- ----------------- ---- ----------------- ------
我们只需在 CSS 文件中将该 div 指定为 cloth 类：
------ - --------- --------- - ------ --- - --------- --------- -
现在，图片将会自然浮动起来，并且会贴合到相邻元素的边缘上。你可以尝试添加更多图片进去，它们都将很好地浮动。
进一步定制
除了加上布料般的自然浮动外，cloth 还支持多种设置来实现完全的定制。以下是某些重要的选项：
速度
可以使用 speed 属性来调整元素的漂移速度：
------ --- - ------ -- -- - ------- -- -
等待时间
可以使用 delay 属性来修改元素之间的等待时间（在 CPU 空闲时等待）：
------ --- - ------ -- -- - - -- -
方向
可以使用 direction 属性来改变元素的漂移方向：
------ --- - ---------- -------- -
可以取值 "up"，"right"，"down" 或 "left"。
大小
元素的大小默认由它们原本的大小确定，可以使用 scale 属性对它们进行缩放：
------ --- - ------ ---- -- -------- -- -
同样，可以使用 rotate 属性来旋转它们。
回调函数
当图片漂移到目标位置时，我们还可以使用回调函数来触发一个事件：
----------------------------------------------- -- - -------------------- ---
示范代码
--------- -----
------
------
------------ ----------
----- ---------------- -----------------------
-------
------
---- --------------
---- -----------------
---- -----------------
---- -----------------
------
------- ------------------------------
--------
--------------------------------------- -
------ --
------ --
---------- --------
------ ----
------- -------
---------- -- -
--------------------
---
---------
-------
-------结论
npm 包 cloth 是一个功能强大的库，可以帮助我们轻松地给网页添加自然布料般的漂移效果。虽然它与我们平时使用的 CSS 相比更为复杂，但却能让我们在设计网页时获得更多精彩的效果，让网页更具有视觉冲击力。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005535681e8991b448d08fa