简介
neat-rr 是一款专门针对前端项目中自适应布局问题的 npm 包，支持解决常见自适应布局问题并提供多种可选参数。
安装及使用
安装 neat-rr
npm install neat-rr --save
在项目中使用 neat-rr
import { neatRR } from 'neat-rr'; const result = neatRR(width, height, gap, count, minWidth, maxWidth); // 具体参数说明请见下面的「参数说明」部分 console.log(result);
参数说明
| 参数名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | number | 100 | 整个布局的宽度 |
| height | number | 100 | 整个布局的高度 |
| gap | number | 0 | 计算每个元素宽度时的间隙，单位 px |
| count | number | 1 | 元素数量，会自动将宽度均分到每个元素上，如果溢出则自动增加列数 |
| minWidth | number | 0 | 每个元素的最小宽度 |
| maxWidth | number | 100 | 每个元素的最大宽度 |
示例代码
以下示例代码演示如何使用 neat-rr 进行自适应布局。
<div id="my-container"></div>
-- -------------------- ---- -------
------ - ------ - ---- ----------
----- --------- - ----------------------------------------
----- ---- - --------- --------- --------- ------------ -------- --------------
-------- ------------ -
----- ------ - ----------- ---- --- ------------ --- -----
----- - ---------- ----------- -------- - - -------
--------------------- - --------- - -------- - -----
---------------------- - ---------- - -------- - -----
--- ---- - - -- - - ------------ ---- -
----- ---- - ------------------------------
---------------- - --------- - -----
----------------- - ---------- - -----
--------------------- - ---------- - -----
----------------------- - ------
-------------------- - ---------
--------------------- - -------
----------------- - ------
---------------- - --------
----------------------------
-
-
-------------上述代码演示了如下效果图：
总结
neat-rr 帮助开发者快速地完成自适应布局，且支持多种参数，非常实用。建议使用 neat-rr 解决前端项目中的布局问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005625a81e8991b448df9a4