在 Web 开发中，为了方便地展示图片，我们通常会使用图片展示组件。在众多图片展示组件中，photo-grid 是一款非常实用的 npm 包。在该教程中，我们将会探索 photo-grid 的基本用法、深入学习 photo-grid 的特性以及如何在实际应用中使用 photo-grid。
photo-grid 的基本用法
photo-grid 以网格（grid）的形式展示图片。这款组件需要在项目中安装，可以通过以下命令进行安装：
npm install photo-grid
安装完成后，我们需要引入 photo-grid 组件：
import PhotoGrid from 'photo-grid';
接下来，我们创建一个基本的 photo-grid 实例：
const photoGrid = new PhotoGrid('.photo-grid', {
columns: 3,
rows: 2,
margin: 10,
});在这个实例中，我们使用 .photo-grid 作为选择器，表示 photo-grid 将会被插入到这个选择器所指向的元素中。columns 和 rows 属性表示网格的列数和行数。margin 属性表示网格间的间距。这样，我们就创建了一个简单的 photo-grid。
接下来，我们需要传入图片数据：
photoGrid.setPhotos([
{ src: 'https://example.com/image1.jpg' },
{ src: 'https://example.com/image2.jpg' },
{ src: 'https://example.com/image3.jpg' },
{ src: 'https://example.com/image4.jpg' },
{ src: 'https://example.com/image5.jpg' },
{ src: 'https://example.com/image6.jpg' },
]);这个 setPhotos 方法接收一个包含图片数据的数组。每个图片对象都应该包含 src 属性，并且可以包含其他自定义属性。这个方法会将图片数据插入到 photo-grid 中。
最后，我们需要渲染 photo-grid：
photoGrid.render();
这样，我们就成功地将 photo-grid 渲染到页面中了。
photo-grid 的特性
除了基本用法之外，photo-grid 还拥有以下特性：
1. 支持 Lazy load
当我们需要展示大量图片时，考虑到页面性能等问题，不能立即加载完所有图片。这时，lazy load 就派上了用场。photo-grid 原生支持 lazy load，我们只需要将图片的 placeholder 和实际图片 URL 传给 photo-grid，即可帮助我们实现 lazy load：
photoGrid.setPhotos([
{ src: 'https://example.com/image1.jpg', placeholder: 'loading.gif' },
{ src: 'https://example.com/image2.jpg', placeholder: 'loading.gif' },
{ src: 'https://example.com/image3.jpg', placeholder: 'loading.gif' },
{ src: 'https://example.com/image4.jpg', placeholder: 'loading.gif' },
{ src: 'https://example.com/image5.jpg', placeholder: 'loading.gif' },
{ src: 'https://example.com/image6.jpg', placeholder: 'loading.gif' },
]);这里，我们将 loading.gif 当作占位符传给了 photo-grid。
2. 支持图片自适应
由于不同的图片可能有不同的大小，如果直接将它们放入网格中，可能会导致网格错位或者图片存在过多的空白。针对这一问题，photo-grid 提供了支持图片自适应的特性。当这个特性启动后，photo-grid 会自动调整图片大小，使它们对齐：
const photoGrid = new PhotoGrid('.photo-grid', {
columns: 3,
rows: 2,
margin: 10,
adaptive: true, // 开启自适应
});3. 支持图片排序
如果我们希望改变图片在网格中的顺序，我们可以使用 sort 方法：
photoGrid.sort([ 0, // 将第 1 张图片放在第 1 个位置 1, // 将第 2 张图片放在第 2 个位置 3, // 将第 4 张图片放在第 3 个位置 2, // 将第 3 张图片放在第 4 个位置 5, // 将第 6 张图片放在第 5 个位置 4, // 将第 5 张图片放在第 6 个位置 ]);
4. 支持图片过滤
如果我们希望仅展示满足条件的图片，我们可以使用 filter 方法：
photoGrid.filter(photo => photo.size < 1000);
这个示例会移除文件大小小于 1000 的所有图片。
在实际应用中使用 photo-grid
在实际应用中，我们通常需要动态地添加或者删除图片。这时，我们可以通过下面的方式进行：
photoGrid.addPhotos([
{ src: 'https://example.com/image7.jpg', size: 2000 },
{ src: 'https://example.com/image8.jpg', size: 1500 },
{ src: 'https://example.com/image9.jpg', size: 800 },
]);这个示例会在现有的图片数据之后添加三条数据。
同样地，我们可以删除图片：
photoGrid.removePhotos([0, 2, 4]);
这个示例会移除第 1、3、5 张图片。
最后，我们需要重新渲染 photo-grid：
photoGrid.render();
这样，我们就可以在实际应用中灵活地控制 photo-grid 了。
示例代码
为了加深理解，我们提供一个完整的示例代码：
-- -------------------- ---- -------
------
------
----------------- ----------
------- --------------
------ --------- ---- ------------- -- -- ----------
----- --------- - --- ------------------------ -
-------- --
----- --
------- ---
---
-- ------
---------------------
- ---- --------------------------------- ------------ ------------- --
- ---- --------------------------------- ------------ ------------- --
- ---- --------------------------------- ------------ ------------- --
- ---- --------------------------------- ------------ ------------- --
- ---- --------------------------------- ------------ ------------- --
- ---- --------------------------------- ------------ ------------- --
---
-- -- ----------
-------------------
-- ----
----- --------- - --------------------------------------
----------------------------------- -- -- -
---------------------
- ---- --------------------------------- ----- ---- --
- ---- --------------------------------- ----- ---- --
- ---- --------------------------------- ----- --- --
---
-------------------
---
-- ----
----- ------------ - -----------------------------------------
-------------------------------------- -- -- -
-------------------------- -- ----
-------------------
---
---------
-------
------
---- -------------------------
------- -------------------------------
------- -------------------------------------
-------
-------这个代码片段展示了一个包含 photo-grid 的页面，并且提供了添加和删除图片的按钮。当我们点击 Add 按钮后，会在现有的图片之后添加三张新的图片。当我们点击 Remove 按钮后，会移除第 1、3、5 张图片。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ff81e8991b448e0ce7