前言
layout-bin-packer 是一款基于二叉树算法实现的自适应布局工具，可以用于排列组件、图片等元素，常用于前端网页布局。本文将介绍该工具的使用教程，包括安装、使用方法以及示例代码。
安装
使用 npm 安装该包：
npm install layout-bin-packer
使用方法
在项目中引入该包：
const LayoutBinPacker = require('layout-bin-packer');然后使用构造函数创建实例：
const packer = new LayoutBinPacker();
可以设置容器大小和元素数据：
-- -------------------- ---- ------- ----- -------------- - ---- ----- --------------- - ---- ----- -------- - - - -- ---- -- --- -- - -- ---- -- --- -- - -- ---- -- --- -- - -- --- -- -- -- -- ------- -------- -- --------------------------- ---------------- ----------
容器大小设置好后，可以使用 getLayout() 方法获取元素布局：
const layout = packer.getLayout();
getLayout() 方法返回一个数组，其中每个元素代表一个元素布局信息，包括宽度、高度以及 X 和 Y 坐标：
[ [100, 100, 0, 0], [150, 150, 100, 0], [200, 200, 0, 100], [80, 80, 200, 0], // ...more element layouts ]
可以根据这些布局信息来定位元素。
示例代码
下面是使用 layout-bin-packer 排列图片的示例代码：
-- -------------------- ---- -------
----- --------- - -
---------------------------------
---------------------------------
---------------------------------
-- ------- ----- ----
--
----- ------------ - ---
----- -------------- - ----
----- --------------- - ----
----- ------ - --- ------------------
----- --------- - -------------------------------------
-- ---- ------ --- --- -- ------
--- ---- - - -- - - ----------------- ---- -
----- --- - --- --------
------- - -------------
---------- - -- -- -
----- - - ----------
----- - - -----------
-- --- -- ------
------------------- -- - ---
-- --- -- ---
---------------------------
-----------------------
-- -------------------- --- ----------------- -
-- --- ------ ------- -------- ------
--------------------------- -----------------
----- ------ - -------------------
-- ------ ----- --------- ----- -- ------
--- ---- - - -- - - -------------- ---- -
----- --- - ----------------
----- --- -- -- -- - ----------
--------------- - ---------
---------------- - ---------
------------------ - -----------
-------------- - ---------
------------- - ---------
-
-
--
-该示例代码可以自适应排列不同大小的图片。更多关于 layout-bin-packer 的使用方法可以查看其官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa38b5cbfe1ea06103c2