npm 包 Evenizer 使用教程

前言

NPM（Node Package Manager）作为 Node.js 的包管理工具，拥有着无比强大和方便的功能。在受到前端开发者的喜爱之余，也吸引了各类工具的开发者们。本文就是介绍其中一个 npm 包 -- Evenizer，它是一个用于将宽高比例转换为单独的百分比的工具，且它可以帮助前端工程师们快速实现元素高度的自适应布局。

Evenizer 的使用

在开始使用 Evenizer 之前，需要确保已经安装 npm 包管理工具。进入到任何一个项目的工作目录内，输入以下命令进行安装：

npm install evenizer --save

安装完成后，在该项目中就可以通过 import 或 require 来使用 Evenizer。

import evenizer from 'evenizer';

const container = document.querySelector('.container');
const items = document.querySelectorAll('.item');

evenizer.fit(container, items);

以上代码示例中，首先需要获取到容器和所有的元素，然后调用 evenizer.fit() 方法进行 Evenizer 处理。

进阶使用

Evenizer 支持配置实现更多高级的布局自适应。接下来分别从两个方面介绍如何使用 Evenizer：固定列宽，自适应列高 和 固定列高，自适应列宽。

固定列宽，自适应列高

首先需要确定每一列的宽度，然后将宽度传输至 evenizer.fit() 方法中即可，如下：

const container = document.querySelector('.container');
const items = document.querySelectorAll('.item');

evenizer.fit(container, items, {
  fixedColWidth: 200, // 设定每一列的宽度为 200px
});

上述代码示例中，使用 fixedColWidth 属性设置了每一列的宽度为 200px，Evenizer 就会按照这一设定自动计算出每一项元素的高度。

固定列高，自适应列宽

和前一种方案类似，同样需要确定每一列的高度，然后将高度传输至 evenizer.fit() 方法中即可，如下：

const container = document.querySelector('.container');
const items = document.querySelectorAll('.item');

evenizer.fit(container, items, {
  fixedRowHeight: 200, // 设定每一列的高度为 200px
});

上述代码示例中，使用 fixedRowHeight 属性将每一行的高度设定为 200px，Evenizer 就会按照这一设定自动计算出每一项的宽度。

结语

Evenizer 是一个实现前端布局自适应的优秀 npm 包，在我们日常的前端开发工作中，常常遇到需要进行元素高度或宽度自适应布局的情况，使用 Evenizer 能够有效提高代码的效率和减少我们的工作负担。希望通过本文的介绍，能够对 Evenizer 有更深的认识，和更广泛的应用范畴。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc7fb5cbfe1ea06127ce