前言
fabonacci-layout 是一个基于 Fibonacci 数列算法的布局库，可以实现自适应的宽度和高度排列布局。 它可以很好地解决多种情况下的布局问题，例如：相邻两个元素宽度不一致，元素数量不确定等问题。本篇文章将详细介绍如何使用该库。
安装
直接使用 npm 安装：
$ npm install fabonacci-layout --save
基本用法
fabonacci-layout 提供了一个 FibonacciLayout 类，我们需要先创建一个实例：
import FibonacciLayout from 'fabonacci-layout'; const fl = new FibonacciLayout();
然后，我们需要将需要布局的元素传入 layout 方法中以获取布局后的信息：
-- -------------------- ---- ------- -- -------------- ----- ----- - ----------------------------------- -- -------- ----- ------ - ---------------- - --------------- ---- -- ----- ------------- ---- -- ------- ----------- --- -- ------- --- -- -------- --------------------
layout 方法的第一个参数是一个元素列表，我们需要将需要布局的元素传入。 第二个参数是一个可选的配置对象，可以指定容器的宽度、元素的最小宽度和元素之间的间距。如果不指定，则默认使用如下配置：
{
containerWidth: window.innerWidth, // 宽度取当前窗口的宽度
itemMinWidth: 200,
itemMargin: 10,
}layout 方法返回一个布局后的结果数组，每个元素包含以下信息：
{
el: Element, // 元素的 DOM 对象
width: Number, // 元素的宽度
height: Number, // 元素的高度
left: Number, // 元素距离容器左边的距离
top: Number, // 元素距离容器顶部的距离
}我们可以将这些信息应用到元素上，例如：
result.forEach(item => {
const { el, width, height, left, top } = item;
el.style.width = `${width}px`;
el.style.height = `${height}px`;
el.style.left = `${left}px`;
el.style.top = `${top}px`;
});示例代码
如果您想更加深入地了解 fabonacci-layout 的用法，这里提供一个完整的示例代码。
-- -------------------- ---- -------
-------
---------- -
--------- ---------
------ ------
------- ------
----------------- -----
-
----- -
--------- ---------
----------------- --------
------ -----
---------- -----
----------- -------
------------ -----
-------------- ----
-
--------
---- ---------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- ---------------------
---- ---------------------
---- ---------------------
---- ---------------------
---- ---------------------
---- ---------------------
------
--------
------ --------------- ---- -------------------
----- -- - --- ------------------
----- ----- - -----------------------------------
----- ------ - ---------------- -
--------------- ----
------------- ----
----------- ---
---
------------------- -- -
----- - --- ------ ------- ----- --- - - -----
-------------- - -------------
--------------- - --------------
------------- - ------------
------------ - -----------
---
---------总结
通过本文，我们了解了如何使用 fabonacci-layout 实现自适应的宽度和高度排列布局， 它可以很好地解决多种情况下的布局问题，例如：相邻两个元素宽度不一致，元素数量不确定等问题。准确理解 Fibonacci 数列算法对算法实现有很大的指导意义，同时也可借此快速了解常用算法的思路和实现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8381e8991b448d9154