Justified Gallery 使用中文文档

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 运行示例图 justified-gallery 运行示例图

重要配置

这个 js 插件的一个重要配置就是配置行高 rowHeight 例如你设置了 160px 的高度,则算法尝试构建一个高度为 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>