【web前端技术】深入理解与应用：响应式画廊插件 Justified Gallery

前言

在Web前端开发中，图片展示是常见的需求。为了更好地呈现图片，开发者常常需要借助画廊插件来实现美观且功能丰富的图片展示效果。Justified Gallery 就是这样一款功能强大的响应式画廊插件，它能够自动调整图片大小和排列方式，以最佳方式适应不同屏幕尺寸和分辨率的设备。本文将深入探讨 Justified Gallery 的特性、使用方法、高级定制以及实际应用案例，帮助读者全面掌握这款优秀的画廊插件。

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

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

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

---

---

一、Justified Gallery：概述与优势

Justified Gallery 是一款 jQuery 插件，它能够创建一个响应式的、基于网格布局的图片画廊。其核心功能在于能够动态计算并调整每张图片的大小，使得所有图片在同一行的高度保持一致，从而形成一个整齐、美观的画廊布局。与传统的固定大小网格布局相比，Justified Gallery 能够更好地利用空间，避免出现大量的空白区域，尤其是在处理不同尺寸图片时，更能体现其优势。

Justified Gallery 的主要优势包括：

• 响应式布局: 自动适应不同屏幕尺寸，提供最佳的视觉体验。
• 自适应图片大小: 动态调整图片大小，保持每行图片高度一致。
• 高效的空间利用: 最大程度地减少空白区域，充分利用可用空间。
• 易于使用: 提供简单的 API 和丰富的配置选项，方便开发者快速集成和定制。
• 轻量级: 核心文件体积小，不会对网站性能造成 significant 影响。
• 良好的浏览器兼容性: 支持主流的现代浏览器。

二、Justified Gallery：快速入门

1. 引入必要的库文件:

首先，需要在 HTML 文件中引入 jQuery 库和 Justified Gallery 的 CSS 和 JavaScript 文件。可以通过 CDN 或本地方式引入。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.8.1/css/justifiedGallery.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js"></script>

2. 创建 HTML 结构:

创建一个包含图片的容器元素，例如 <div>，并为其指定一个唯一的 ID。在容器内，放置 <a> 元素作为图片的链接，并使用 <img> 元素显示图片。

<div id="myGallery">
  <a href="image1.jpg">
    <img src="image1_thumbnail.jpg" alt="Image 1">
  </a>
  <a href="image2.jpg">
    <img src="image2_thumbnail.jpg" alt="Image 2">
  </a>
  <!-- ... more images ... -->
</div>

3. 初始化 Justified Gallery:

使用 jQuery 选择器选中容器元素，并调用 justifiedGallery() 方法初始化插件。

$(document).ready(function(){
  $("#myGallery").justifiedGallery();
});

三、Justified Gallery：配置选项详解

Justified Gallery 提供了丰富的配置选项，可以自定义画廊的外观和行为。以下是一些常用的配置选项：

• rowHeight: 每行图片的高度，默认为 120px。
• lastRow: 最后一行的对齐方式，可选值为 ‘nojustify’（不调整）、‘justify’（调整）、‘hide’（隐藏）、‘center’（居中）。
• margins: 图片之间的间距，默认为 10px。
• captions: 是否显示图片标题，默认为 true。
• captionSettings: 图片标题的样式和显示方式。
• rel: 为每个链接添加 rel 属性，用于 lightbox 插件。
• target: 链接的目标窗口，可选值为 ‘_blank’、‘_self’ 等。
• justifyThreshold: 调整图片大小的阈值，默认为 0.75。值越小，图片大小调整越精细，但计算时间会更长。

示例：自定义配置选项

$("#myGallery").justifiedGallery({
  rowHeight: 200,
  lastRow: 'center',
  margins: 5,
  captions: false
});

四、Justified Gallery：高级应用与技巧

1. 结合 Lightbox 插件:

Justified Gallery 可以与 Lightbox 插件（例如 Fancybox、Magnific Popup）无缝集成，实现点击图片放大查看的功能。只需在配置选项中设置 rel 属性即可。

示例：结合 Fancybox

$("#myGallery").justifiedGallery({
  rel: 'gallery'
});

// 初始化 Fancybox
$('.gallery a').fancybox();

2. 动态加载图片:

可以通过 Ajax 动态加载图片，并使用 Justified Gallery 的 appendItems() 方法将新图片添加到画廊中。

示例：动态加载图片

$.ajax({
  url: 'get_images.php',
  dataType: 'json',
  success: function(data) {
    var newItems = '';
    $.each(data, function(index, image) {
      newItems += '<a href="' + image.url + '"><img src="' + image.thumbnail + '" alt="' + image.title + '"></a>';
    });
    $("#myGallery").justifiedGallery('appendItems', $(newItems));
  }
});

3. 自定义回调函数:

Justified Gallery 提供了一些回调函数，可以在画廊初始化完成、图片加载完成等事件发生时执行自定义代码。

示例：使用回调函数

$("#myGallery").justifiedGallery({
  onComplete: function() {
    console.log('Justified Gallery initialized.');
  },
  onAppendItems: function(newItems) {
      console.log(newItems.length + ' items appended.');
  }
});

4. 图片懒加载:

为了优化页面加载性能，可以结合 lazy load 插件实现图片懒加载。 这样可以避免一次性加载所有图片，提升用户体验.

五、Justified Gallery：实际应用案例

Justified Gallery 广泛应用于各种类型的网站，例如：

• 摄影作品展示网站: 展现摄影师的作品，提供良好的视觉体验。
• 电商产品展示: 展示商品图片，吸引顾客眼球。
• 博客图片墙: 展示博客文章中的图片，提升文章的可读性。
• 个人作品集: 展示设计师、艺术家等的作品。

六、最简单例程

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>

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

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

Github 项目 地址： https://github.com/miromannino/Justified-Gallery
更多使用请参考其 使用文档 。
源码国内源：https://gitee.com/Guang_Long_Yu/justified-gallery

七、一些使用的建议

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

---

八、总结

Justified Gallery 是一款功能强大且易于使用的响应式画廊插件，能够帮助开发者快速创建美观、高效的图片展示效果。 通过灵活的配置选项和高级应用技巧，可以满足各种不同的需求。 本文详细介绍了 Justified Gallery 的特性、使用方法、高级定制以及实际应用案例，希望能够帮助读者更好地理解和应用这款优秀的插件，提升 Web 前端开发效率。 读者还可以进一步探索 Justified Gallery 的官方文档，了解更多高级特性和用法。 不断学习和实践，才能更好地掌握 Web 前端技术，创造出更优秀的 Web 应用。