前言
Front-End 开发应该都知道 Responsive Layout 在网页设计中的重要性。在众多的解决方案中，Justified Grid 是一种很好的前端开发工具，可以用来创建响应式图片网格布局。
Justified Grid 可以将一系列图片一行行地组合起来，使它们的总宽度能够完美地填充容器的宽度而不会出现留白或者重叠的情况，同时也提供了一些特性来优化显示效果。
在本篇文章中，我们将通过引入 NPM 包 justified-grid，向大家介绍如何使用这一工具来创建响应式图片网格布局。
步骤一：创建一个新的项目
如果您还没有创建一个项目，我们可以通过以下步骤创建一个新项目:
打开一个空白目录。
使用 node 包管理器 (npm init) 创建一个新项目。
npm init
在项目根目录下创建一个名为 index.html 的 HTML 文件。
在 index.html 文件中引入 justified-grid 的 CSS
<link rel="stylesheet" href="node_modules/justified-grid/dist/css/justified-grid.min.css">
注：以上 CSS 引用假设我们已经使用 npm 安装了 justified-grid。
现在我们已经创建好了一个新项目，并已经引用了 justified-grid 的 CSS 文件。
步骤二：准备要展示的图片资源
我们需要创建一个文件夹，用于存放我们要制作的图片资源。例如，我们创建了一个名为“photos”的文件夹，并添加了以下两张图片：
photos/1.jpg photos/2.jpg
步骤三：编写 HTML 和 JavaScript 代码
我们需要编写 HTML 和 JavaScript 代码来定义将要创建的网格，以及将要在网格中显示的图片。下面是一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
---------------- ------------
----- ---------------- -------------------------------------------------------------------
-------
------
---- -----------------------
---- ------------------ ---------------- ------------------
---- ------------------ ---------------- ------------------
------
------- -------------------------------------------------------------------------
--------
--- ------------- - --- -------------------------------- -
---------- ----
-------- -
---
---------------------
---------
-------
-------在上面的代码中，我们定义了一个 HTML 结构，并添加了两个图片元素。
我们为每个图片元素添加了两个属性 data-width 和 data-height，用于告诉 Justified Grid 图片的实际宽度和高度。
在 JavaScript 中，我们对一个名为 justified-grid 的 div 元素调用了 JustifiedGrid 的构造函数，并传递了一些配置选项。在这个例子中，我们定义了每行网格的高度为 200 像素，并且我们最多只想显示两行。
最后，我们调用了 justiiedGrid 对象的 init 函数来初始化插件。
步骤四：运行和调试项目
我们完成了用 JavaScript 和 HTML 编写代码的工作，现在运行我们的项目并验证我们的代码是否正确。
在终端中，进入我们的项目根目录并输入以下命令运行我们的项目：
python -m http.server
在浏览器中访问 localhost:8000 即可开始浏览我们的网格布局。
结束语
通过本文的介绍，您已经学会了如何使用 NPM 包 justified-grid 来创建响应式图片网格布局。只需要平铺一些基本的 HTML 和 JavaScript 代码，就能够很容易地创建一个美丽的图片展示网页。
Justified Grid 还有许多可用的选项，可以自定义网格的外观和行为。我们在后续的文章还会为大家分享更多的内容，敬请期待！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ef84c49986ca68d869f