首先，让我们来看看什么是 justified-images 包。这个包是一个用于在网页上按照比例显示图片的工具，可以通过在父元素中指定图片大小和间距，自动计算每张图片的大小和位置，让图片能够完美地填充整个父元素。
在本篇教程中，我们将为您介绍如何使用 justified-images 包。我们将从安装该包开始，一步一步地展示该包的使用方式，并最终提供一个完整的示例代码。
安装 justified-images 包
在使用 justified-images 包之前，您需要安装它。
您可以使用以下命令在项目目录中安装该包：
npm install justified-images
导入图片
在您安装了 justified-images 包之后，您需要为它提供一些图片。
我们可以将图片放在项目目录中的一个名为 images 的文件夹中。您需要在 HTML 代码中使用 <img> 标签引用这些图片：
<img src="images/pic_1.jpg" alt="picture 1"> <img src="images/pic_2.jpg" alt="picture 2"> <img src="images/pic_3.jpg" alt="picture 3"> <img src="images/pic_4.jpg" alt="picture 4">
指定父元素
在您准备引入 justified-images 包之前，您需要创建一个父元素。您可以在 HTML 代码中使用 <div> 标签来创建它：
<div class="image-container"></div>
现在，我们已经创建了一个空的父元素。我们将在下面的步骤中将图片添加到其中。
在您创建了父元素之后，您需要在 CSS 中指定其宽度和间距。例如，如果您想要每张图片之间有 10 像素的间距，您可以使用以下代码：
-- -------------------- ---- ------- ---------------- - ------ ------ ------- - ----- -------- ----- ---------- ----- ---------------- -------------- -------------- -------------- - ---------------- --- - -------------- ----- -
在上面的代码中，我们将图片容器设置为固定宽度 800 像素，并使用 margin: 0 auto 将其水平居中。我们使用 display: flex 将图片容器的子元素作为 Flexbox 布局显示。我们还使用 justify-content: space-between 和 align-content: space-between 确保其中的图片填充整个容器，并且每张图片之间有 10 像素的空隙。
初始化 justified-images 包
在创建父元素后，我们可以初始化 justified-images 包。要做到这一点，您需要在 HTML 代码中添加以下 JavaScript 代码：
-- -------------------- ---- -------
--------
--- -------------- - -------------------------------------------
--- ------- - ---------------------------------------------------
--- ------- - --- ------------------------ -
---------- ---------------
------- --
---
---------在上面的代码中，我们首先选择了带有 .image-container 类的元素，然后从其中选择所有的 <img> 标签。我们将这些元素传递给刚刚安装的 justified-images 包，并使用 margin 参数指定了图片之间的间距。
示例代码
现在，您已经学习了如何使用 justified-images 包。下面是一个完整的示例代码，您可以将它复制到您的项目中，更容易地开始使用 justified-images 包：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------ ------------
-------
---------------- -
------ ------
------- - -----
-------- -----
---------- -----
---------------- --------------
-------------- --------------
-
---------------- --- -
-------------- -----
-
--------
-------
------
---- ------------------------
---- ---------------------- ------------ ---
---- ---------------------- ------------ ---
---- ---------------------- ------------ ---
---- ---------------------- ------------ ---
---- ---------------------- ------------ ---
---- ---------------------- ------------ ---
---- ---------------------- ------------ ---
---- ---------------------- ------------ ---
---- ---------------------- ------------ ---
---- ----------------------- ------------ ----
------
------- ----------------------------------------------------------------------
--------
--- -------------- - -------------------------------------------
--- ------- - ---------------------------------------------------
--- ------- - --- ------------------------ -
---------- ---------------
------- --
---
---------
-------
-------总的来说，justified-images 包是一个非常有用的前端工具，它能够自动根据容器的大小和图片的数量计算出每张图片的大小和位置。它能够让你的网站看起来更美观和专业。现在，您可以尝试使用 justified-images 包来提高您的网站的美观程度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a181e8991b448d5f04