在前端开发中，有时候我们需要调整不同元素的高度或宽度使它们保持一致，这就是等高或等宽布局。而 equalize.js 就是一个非常方便的 npm 包，可以实现等高或等宽布局。
安装和使用
安装 equalize.js：
--- ------- -----------
然后，在 JavaScript 文件中引入 equalize.js 即可：
----- -------- - -----------------------
接下来，我们需要等待页面元素加载完成后执行 equalize：
------------- - ---------- - ----------------- -
上面的代码将会等高所有类名为 .box 的元素。
选项
equalize.js 提供了几个可选参数，使我们可以更好地控制等高或等宽的结果。
equalize(options)
equalize(selector, options): 实现等高或等宽布局。options: 可以设置以下选项：
| 选项 | 类型 | 描述 |
|---|---|---|
equalizeBy |
String | 可选值为 'height' 或 'width'，表示按照高度或宽度进行等高或等宽布局，默认为 'height'。 |
reset |
Bool | 是否在重新计算之前重置元素高度或宽度，默认为 false。 |
例如，我们想要按照元素的宽度进行等高布局，并在重新计算之前重置元素的高度或宽度，可以这样设置：
---------------- - ----------- -------- ------ ----- ---
示例
以下是一个示例，演示如何使用 equalize.js 实现等高布局。
---- --------------
---- ------------
------ -----
-------- ----- ----- --- ----- ----------- ---------- ---------
------
---- ------------
------ -----
------ -- ------- ------ ---------- -- ------ -- ------ ----- -----------
----- ---- -- ----- ------- ---- ------- ------------ ------- ------- ---- -- ------- -- -- ------- --------------
------
---- ------------
------ -----
------- ---- ----- ----- -- ------------- -- --------- ----- ---- ------ ------ -- ------ ----- -------------
------
---------- - ------ ----- ------ -------- -
------------- - ---------- - ----------------- -
在上面的示例中，我们将三个 .box 元素设置为浮动，并将宽度设置为 33.333%。然后在 JavaScript 文件中加载 equalize 并等高所有的 .box 元素。由于每个 .box 元素都有不同长度的内容，因此它们的高度也不相等。但是，通过使用 equalize.js，我们可以很容易地将它们等高。在浏览器中查看上面的示例，您将看到三个 .box 元素已经被等高。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/35335