简介
justifiedgallery 是一个基于 jQuery 的图片展示库，能够帮助我们以美观的方式来展示我们的图片。它可以自动排版图片，并提供滑动和触摸支持。在本文中，我们将介绍如何使用 npm 包 justifiedgallery 来轻松地构建一个美观的图片展示。
安装
使用 npm 来安装 justifiedgallery 命令如下：
npm install justifiedgallery
使用
安装成功之后，我们需要在我们的项目中引入 justifiedgallery：
import 'justifiedgallery/dist/css/justifiedGallery.css'; import 'justifiedgallery/dist/js/jquery.justifiedGallery.js';
我们还需要在 HTML 代码中添加一个相册容器，例如：
<div id="my-gallery"></div>
然后，我们可以使用 JavaScript 代码构建我们的相册如下：
$(document).ready(function() {
$('#my-gallery').justifiedGallery({
rowHeight: 120,
lastRow: 'nojustify',
margins: 5
});
});此代码将生成一个 120 像素高度的图像行，并在最后一行中不强制对齐图片。此外，间距为 5 像素。
示例代码
下面是一个完整的 HTML + CSS + JavaScript 示例代码，用于演示如何使用 justifiedgallery 包来构建一个简单的图片展示页面。
-- -------------------- ---- -------
--------- -----
------
------
-------------------------------
----- ---------------- --------------- -------------------------------------------------------------------
------ ----------------
------------------ -
------- - -----
---------- -------
-
--------
-------
------
---- -----------------------------
------- ---------------------- ----------------------------------------------------------------
------- ---------------------- --------------------------------------------------------------------------------
------- -----------------------
---------------------------- -
--- ------ - -
-
------ ---------------------------------
--
-
------ ---------------------------------
--
-
------ ---------------------------------
--
-
------ ---------------------------------
--
-
------ ---------------------------------
--
-
------ ---------------------------------
--
-
------ ---------------------------------
--
-
------ ---------------------------------
-
--
--- ------- - -
---------- ----
-------- -
--
------------------------------------------
------- -------
---------- ------------------
-------- ----------------
-------- -----------
---
---
---------
-------
-------在此示例代码中，我们使用了一个数组来存储图像，每个图像都具有 src 属性。 图像的大小随意，适应任何场景。
指导意义
通过学习此篇文章，您将得到使用 justifiedgallery npm 包构建图片展示的详细指导。您了解了：
- 如何安装 justifiedgallery npm 包；
- 如何在 HTML 中添加相册容器；
- 如何使用 JavaScript 代码来构建相册；
- 如何在网页中展示无限的图片。
由于 justifiedgallery npm 包具有简单的 API 和强大的功能，因此它在对于前端开发中构建漂亮的图片展示方面非常有价值。 我们的文章使得您可以轻松地构建美丽的图片展示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ef84c49986ca68d869d