Justified Gallery 是一个方便你创建瀑布流照片的 JavaScript 库，它可以帮助你优雅的排列图片显示，使用它的网站有 500px、Flickr 和 Google.
官网地址：https://miromannino.github.io/Justified-Gallery/
如何使用
下载地址：https://github.com/miromannino/Justified-Gallery/releases
这个库使用的前提是引入 jQuery 如果你的浏览器不是旧的很离谱它都可以很好的工作。
1
2
| <link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.justifiedGallery.js"></script>
|
接下来只需要将图片放入 <div> 标签中，当然你可以给 <img> 包裹 <a> 或者其他标签，这些都是支持的，例如：
1
2
3
4
5
6
7
8
9
| <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>
|
然后在此页面的 <script> 中执行如下 js 代码即可显示出漂亮的瀑布流图片样式。
1
| $("#mygallery").justifiedGallery();
|
justified-gallery 运行示例图
重要配置
这个 js 插件的一个重要配置就是配置行高 rowHeight 例如你设置了 160px 的高度，则算法尝试构建一个高度为 160px 的行来放置图片，如下图：
设置 160px 高度
有一种情况下，你可能希望无论多少图片最后一行都能完整展示，不留空白。这个时候就需要使用 lastRow 属性来设置展示方式。例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div id="basicExample2" class="justified-gallery">
<a href="path/to/image1.jpg">
<img alt="caption for image 1" src="path/to/image1_thumbnail.jpg"/>
</a>
<a href="path/to/image2.jpg" title="Just in a dream Place">
<img alt="caption for image 2" src="path/to/image2_thumbnail.jpg"/>
</a>
...
</div>
<script>
$('#basicExample2').justifiedGallery({
rowHeight : 70,
lastRow : 'nojustify',
margins : 3
});
</script>
|
上面代码设置了行高为 70px, 最后一行设置为 nojustify 意思就是按照自己的大小和位置留白，这个 lastRow 有很多值可选，参数如下：
justify：最后一行不受高度限制，自动填充空白。nojustify：按照自己的大小和位置留白。hide：如果最后一行不全，不显示最后一行。center：按照设定行高，居中显示。right：按照设定行高，居右显示。left：按照设定行高，居左显示。
上面我们还设置了一个重要的参数，那就是 margins 这个设置是对图片直接间隙大小进行设置。
除了这三个最基本的设置，我们还可以设置例如 maxRowHeight 来决定当图片超出某个高度进行裁切， 设置 maxRowsCount 来限制最大显示几行。
全部参数请参考：https://miromannino.github.io/Justified-Gallery/options-and-events/
实践案例
这个 js 插件很容易使用，我在 Hexo 和 Hugo 搭建的博客中好几处都使用了该插件，例如之前实现的相册功能：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <script>
$(function(){
$.getJSON("https://api.apiopen.top/getImages?page=0&&count=50", function (data) {
console.log(data);
for(var i = 0; i < data.result.length; i++){
$("#out-image-gallery").append(
'<a class="gallery-item fancybox jg-entry entry-visible" href="'
+ data.result[i].img + '" rel="photos-meitu"><img src="' + data.result[i].img
+ '" alt="美女图片-' + data.result[i].time + '" title="美女图片-'
+ data.result[i].time + '"></a>');
$('.justified-gallery2').justifiedGallery(
{rowHeight:300, margins:4, randomize: true});
}
});
});
</script>
<div class="justified-gallery2" id="out-image-gallery"></div>
|
还有现在本站的 教程 页面均使用 JustifiedGallery 实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <div class="justified-gallery"></div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
$.get('/json-data/tutorial.json', function (data) {
data.sort(function(a, b){ return Math.random()>.5 ? -1 : 1;});
var justifiedGallery = $(".justified-gallery");
if(justifiedGallery == null || justifiedGallery === undefined) return;
for(var i = 0; i < data.length; i++){
var newHtml = "";
if(data[i].new != undefined){
newHtml = '<img src="/navigation/tutorial/new.png" style="margin:8px;"/>';
}
var innerHtml = '<div><a href="' + data[i].url
+ '" target="_black" class="nofancybox"><img src="' + data[i].img
+ '" alt="' + data[i].name + '"/></a><div style="margin:0;display:inline-block;position:relative;">'
+ newHtml + '</div></div>';
justifiedGallery.append(innerHtml);
}
justifiedGallery.justifiedGallery({rowHeight:160, margins:4,
thumbnailPath: function (currentPath, width, height, image) {
if (Math.max(width, height) < 400) {
return currentPath;
} else {
return currentPath + "!photo_thumb";
}
}
});
});
});
</script>
|
