TJ Gallery – 响应式自适应相册 jQuery 插件

TJ gallery 是一个 jQuery 图片相册插件，它可以在响应式、对齐的网格布局中调整图像大小并排列不同大小，就像您在 Google 图片和 Flickr.com 上看到的那样。

使用方法

1、将图像插入 DIV 容器中

<div class="pictures">
  <img src="1.jpg" alt="" />
  <img src="2.jpg" alt="" />
  <img src="3.jpg" alt="" />
  <img src="4.jpg" alt="" />
  <img src="5.jpg" alt="" />
  ...
</div>

2、该插件还适用于 DIV 元素

<div class="pictures">
  <div class="item">
    <div class="item_description"><span>Lorem Ipsum is simply dummy text</span></div>
    <img src="1.jpg" alt="" /></div>
  <div class="item">
    <div class="item_description"><span>Lorem Ipsum is simply dummy text</span></div>
    <img src="2.jpg" alt="" /></div>
  <div class="item">
    <div class="item_description"><span>Lorem Ipsum is simply dummy text</span></div>
    <img src="3.jpg" alt="" /></div>
  <div class="item">
    <div class="item_description"><span>Lorem Ipsum is simply dummy text</span></div>
    <img src="4.jpg" alt="" /></div>
  <div class="item">
    <div class="item_description"><span>Lorem Ipsum is simply dummy text</span></div>
    <img src="5.jpg" alt="" /></div>
</div>

3、将 jQuery 库和 jQuery TJ 插件放在 html 文档的末尾

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-tjgallery.min.js"></script>

4、调用顶部容器上的函数，就完成了。

$('.pictures').tjGallery();

5、指定网格行的最小高度

$('.pictures').tjGallery({
  row_min_height: 180
});

6、指定网格项之间的边距

$('.pictures').tjGallery({
  margin: 5
});

7、指定目标选择器

$('.pictures').tjGallery({
  selector:'img'
});

8、如果你想销毁插件

$('.pictures').tjGallery('clear');

效果预览

初始发布：2025年8月1日