npm 包 justified-gallery 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 justified-gallery？

justified-gallery 是一个可轻松生成自适应的 Web 品质图片库的 JavaScript 插件，它为您提供了一种简单的方法来设计和创建珍贵和定制的相册和图库。

该插件通过对图像进行分类和排序，以便在 HTML 的表格视图中放置它们，同时采用流体布局，以使图像自适应其容器，并与其碰撞以获得最佳的分布。

如何使用 justified-gallery？

安装 justified-gallery(npm):
```
npm install justified-gallery --save
```

导入 justified-gallery:

import JustifiedGallery from 'justified-gallery';

// 或者
const JustifiedGallery = require('justified-gallery');

按照 HTML 结构编写你的图库代码:

<div id="my-gallery">
    <a href="image1.jpg" title="Image 1"><img src="image1.jpg"></a>
    <a href="image2.jpg" title="Image 2"><img src="image2.jpg"></a>
    <a href="image3.jpg" title="Image 3"><img src="image3.jpg"></a>
    <a href="image4.jpg" title="Image 4"><img src="image4.jpg"></a>
    <a href="image5.jpg" title="Image 5"><img src="image5.jpg"></a>
    ...
</div>

在 JavaScript 中实例化 justified-gallery:

const options = {
    rowHeight: 200, // 行高
    margins: 5 // 边距
};
JustifiedGallery(document.getElementById('my-gallery'), options);

Configure your CSS styles:

-- -------------------- ---- -------
----------- -
    ------ -----
    ------- - -----
-

----------- - -
    -------- ------
    ------ -----
-

----------- --- -
    ---------- -----
    ------- -----
-

API 参考

justified-gallery 支持以下选项:

选项	说明	默认值
`rowHeight`	每行的高度	`120`
`maxRowHeight`	最大行高	`false`
`rowHeightTolerance`	行高容差	`0.25`
`margins`	每个元素之间的间隙	`1`
`lastRow`	如何处理最后一行	`'nojustify'`
`justifyThreshold`	行缩放阈值	`0.75`
`waitThumbnailsLoad`	容器是否等待所有缩略图加载完成后才显示	`true`
`captions`	图像标题的来源	`'title'`
`refreshTime`	重绘之间的延迟 (ms)	`250`
`target`	集合元素的容器	`'self'`
`selector`	集合选择器	`'a'`
`rel`	输出到 `data-lightbox` 属性的图像关系。应作为 selector 匹配的其他图像的某种标识符。	`false`
`extension`	输出到 `data-src` 属性的图像扩展名或可以包含在 `src` 中的 URL。	`'(jpg\|jpeg\|png\|gif)'`
`mimeTypes`	用于 `data-src` 的 MIME 类型，如为 `false`，则尝试从 `src` 或 `href` 中解析扩展名	`false`
`imagesAnimationDuration`	图片加载时序列动画的持续时间.	`500`
`imagesAnimationTiming`	图片加载时序列动画的时间函数.	`'ease-in-out'`
`captionsAnimationDuration`	动态加载或改变标题的持续时间。	`500`
`captionsVisibleOpacity`	标题动画中可见文本的透明度。	`0.7`
`imagesFollowedTransition`	`true` 使可以在：hover 或 active 标题下和宽度和间距之间进行过渡。否则，仅更新容器宽度和间距，当选项被更改时。	`false`
`imagesFollowedTransitionDuration`	当 `imagesFollowedTransition: true` 时缩略图大小动画的持续时间	`300`

示例代码

HTML 结构

<div id="my-gallery">
    <a href="images/image1.jpg" title="Image 1"><img src="images/image1.jpg"></a>
    <a href="images/image2.jpg" title="Image 2"><img src="images/image2.jpg"></a>
    <a href="images/image3.jpg" title="Image 3"><img src="images/image3.jpg"></a>
    <a href="images/image4.jpg" title="Image 4"><img src="images/image4.jpg"></a>
    <a href="images/image5.jpg" title="Image 5"><img src="images/image5.jpg"></a>
</div>

CSS 样式

-- -------------------- ---- -------
----------- -
    ------ -----
    ------- - -----
-

----------- - -
    -------- ------
    ------ -----
-

----------- --- -
    ---------- -----
    ------- -----
-

JavaScript 代码

import JustifiedGallery from 'justified-gallery';

const options = {
    rowHeight: 200,
    margins: 5
};

JustifiedGallery(document.getElementById('my-gallery'), options);

结语

以上就是 justified-gallery 的使用方法，我们可以轻松地生成兼容性强，美观自适应的图库，为我们的 Web 页面添加更多视觉效果。感谢开源社区对前端技术的贡献，让我们能够在编写代码时更加迅速高效。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066ef84c49986ca68d8699