什么是 holdspartans
holdspartans 是一个用于前端普通元素自由排列的 npm 包。它可以将任意个普通元素按照指定的排列方式进行布局。使用 holdspartans 可以非常方便地实现类似 Pinterest 的风格布局。
如何安装
使用 npm 安装 holdspartans：
npm install holdspartans
如何使用
首先，你需要使用模块导入 holdspartans：
import Holdspartans from 'holdspartans';
然后，在 HTML 中放置需要布局的 DOM 元素，并为它们设置类名：
<div class="my-item">Item 1</div> <div class="my-item">Item 2</div> <div class="my-item">Item 3</div> <div class="my-item">Item 4</div> <div class="my-item">Item 5</div>
接下来，在 JavaScript 中创建一个 Holdspartans 实例并初始化：
-- -------------------- ---- ------- ----- ------------ - --- -------------- ---------- ---------------- -- ----------- ------------- ----------- -- --------- ------------ -- -- -- ----------- --- -- -------- --------------- ---- -- ------ --------- --- --------------------
注意，这里的 .my-container 是包含 my-item 的 DOM 元素的父容器。columnCount 表示你要布局的列数。gutterSize 表示每两列之间的间隔距离。resizeDebounce 表示当浏览器窗口大小改变时重新布局的时间间隔。
最后，你需要为要布局的元素设置样式，使其能够按照你的意愿进行布局。下面是一个示例：
.my-item {
position: absolute; /* 必须为绝对定位才能自由排列 */
width: calc(33.33% - 10px); /* 每列的宽度为 33.33% */
margin: 10px; /* 每个元素之间的间隔为 10px */
}示例代码
最后，这里是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------- ------------
-------
-- ------------- ---- -------- --
-------- -
-------- -----
---------------- -------
------------ -------
----------------- --------
------- ------
---------- -----
------------ -----
-
-- ------------------- --
------------- -
----------------- -----
-
--------
-------
------
---- ---------------------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
---- -------------------- -------
------
------- ----------------------------------------------------------------------------------
--------
----- ------------ - --- --------------
---------- ----------------
------------- -----------
------------ --
----------- ---
--------------- ----
---
--------------------
---------
-------
-------打开这个 HTML 文件，你将会看到如下的效果：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/97893