Justified 基于 jQuery 的相册展示插件

Question

Justified Gallery 是一个 jQuery 的相册展示插件，图片会自动填满整个页面空间，现在很多网站都采用这种方式展示图片，比如 Google、百度图片、500px 等，这种方式看起来比较整齐，感觉比瀑布流更优雅。

对于一个站长来说，如果你有很多图片，你得考虑如何布局这些图片，让他们看起来好看优雅，像 500px、Google 图片、百度图片那样整齐的显示图片，通过 Justified 你也可以做出这样的效果。

使用方法

Justified 需要一系列整齐的链接标签，链接里面放置缩略图，链接指向原始的图片地址

<div id="mygallery" >
<a href="path/to/myimage1_original.jpg">
<img alt="Title 1" src="path/to/myimage1_thumbnail.jpg"/>
</a>
<a href="path/to/myimage2_original.jpg">
<img alt="Title 2" src="path/to/myimage2_thumbnail.jpg"/>
</a>
<!-- other images... -->
</div>

引入我们需要的 jQuery 和 Justified 文件

<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.justifiedGallery.js"></script>

现在你只需要调用插件，即可将所有图片排列的很整齐，在这种情况下，我们使用默认选项。

$("#mygallery").justifiedGallery();

相关链接

• 项目地址：https://justifiedgrid.com/
• 帮助文档：https://www.wenjiangs.com/wp-content/uploads/2018/Justified-Gallery/
• Github 地址：https://github.com/miromannino/Justified-Gallery