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>
|