在前端开发中，展示图片是一个常见的需求。而随着网站和应用程序的不断发展，展示图片的方式也在不断改变。其中一种流行的方式是使用瀑布流（Masonry）或等比例网格（Justified Grid）布局来显示图片。本文将介绍如何使用 npm 包 justifiedGallery 来实现等比例网格布局。
justifiedGallery 简介
justifiedGallery 是一个轻量级、易于使用的 jQuery 插件，用于创建响应式的、自适应的等比例网格布局。它会根据容器的宽度和每张图片的宽高比例来计算图片的大小和位置。同时，它还支持懒加载、缩放、过渡效果等功能。
安装和使用
首先，你需要安装 jQuery 和 justifiedGallery：
--- ------- ------ ------ --- ------- ---------------- ------
然后，在 HTML 文件中引入 jQuery 和 justifiedGallery 的 CSS 和 JS 文件：
------ ------- ----------------------------------------------------------- ----- ---------------- ----------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------ -------
接下来，在 JavaScript 文件中编写如下代码：
---------------------------- -
-----------------------------------
---------- ----
-------- ----------
-------- ---
--------- -----
------------------- ----
---
---这段代码会将 #my-gallery 元素中的图片生成等比例网格布局。其中，rowHeight 表示每一行的高度（单位为像素），lastRow 表示最后一行的对齐方式（取值可以是 justify、center 或 left），margins 表示图片之间的间距（单位为像素），captions 表示是否显示图片标题，waitThumbnailsLoad 表示是否等待缩略图加载完成后再生成布局。
你也可以在 HTML 中通过 data 属性来配置 justifiedGallery：
---- ---------------
---------------------
-----------------------
-----------------
--------------------
---------------------------------
-- ----------------- ------------ ---
---- ---------------------- ---------- ---
----
-- ----------------- ------------ ---
---- ---------------------- ---------- ---
----
---
------
--------
---------------------------- -
------------------------------------
---
---------示例
以下是一个使用 justifiedGallery 显示图片的简单示例：
------
------
------- -----------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------
------- ------------------------------------------------------------------------------------
-------
------
---- ---------------
---------------------
-----------------------
-----------------
--------------------
---------------------------------
-- ---------------------------------------------- ------------ ---
---- --------------------------------------------- ---------- ---
----
-- ---------------------------------------------- ------------ ---
---- --------------------------------------------- ---------- ---
----
-- ----------------------------------------------- ------------ ---
---- ----------------------------------------
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------