【web前端技术】响应式画廊Gallery插件-Justified-Gallery

Justified-Gallery是一个常见的图片布局插件，他拥有安装简单，方便使用的优点，且图片布局较为好看，是一款极为好用的图片布局插件。可惜是网上资料较少，因此我下载了一份官方的代码，上传到了码云，并且整理了一些基本的使用教程。

文章目录

• 插件主要特性
• 如何使用
• 一些使用的建议

本jQuery插件允许你在一个合理的空间内创建响应式、无限滚动、高品质的画廊，并填充满所有的空间。

对于制作网站的人来说，一个常见的问题就是使用各种尺寸和宽高比的图像来创建一个优雅的画廊，Flickr 和 Google+对于这方面的处理非常的棒，这个插件的目的就是使用一种新的快速的算法来帮你解决这个问题。

插件主要特性

• 无需在意像素：使用一种先进的算法无需剪裁图像进行自动调整
• 无限滚动：已经为图片无限加载做好准备，只需添加图片并告诉Justified Gallery
• 高质量：支持任何设备和屏幕尺寸
• 动态画廊：过滤、排序、随机、添加、删除图像，你可以对画廊进行任何操作
• 灯箱效果一体化：你可以使用现有的灯箱效果，如Colorbox 或 Swipebox
• 高度可定制化：提供很多选择供你打造你想要的画廊效果
• Captions：可以给你的图片添加说明文字
• 响应式：可根据屏幕尺寸自动调整大小
• 快速设计：带有智能的缩略图加载，生而很快
• 错误处理：管理服务器的错误，自动跳过不可用图像，并在控制台给出提示

如何使用

Justified Gallery接受固定格式的画廊：每一个a链接中包含一个缩略图，而链接指向原始图片：

<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支持，之后还需引入插件的文件：

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

现在你只需调用即可，它会使用默认参数调整你的图像：

Github 项目 地址： https://github.com/miromannino/Justified-Gallery

更多使用请参考其 使用文档 。

源码国内源：https://gitee.com/Guang_Long_Yu/justified-gallery

一些使用的建议

1. 在一些用到 jQuery 的应用中，建议直接使用本插件来进行图片布局。
2. 学习本插件，建议下载我上传到码云的代码，里面带有20多个常用的图片布局例子，更加方便入门，也更加容易快速上手。
3. 本插件代码量较少，建议学习其源码，对编程之路必定大有好处。