jQuery Photocols – 带图片懒散加载的滚动照片画廊

2026年7月8日386

JQquery Photocols 是一款轻量级的 jQuery 照片网格插件，可以创建带有响应式网格布局的动画滚动照片画廊。它会自动将图片组织成行或列，并持续滚动，形成无限的“图像墙”效果。

该插件支持垂直和水平滚动方向，并可自定义速度设置。它还提供懒加载以优化性能，并利用 CSS 变换实现 GPU 加速动画。

特色

多向滚动：支持上下、左、右四个滚动方向。
可变速度视差效果：每列或每行的滚动速度可能不同。这通过运动产生了深度感知。
IntersectionObserver 的懒加载：只有进入视口时才加载图像。这减少了初始页面加载时间和内存消耗。
GPU 加速动画：使用 CSS 变换实现流畅的 60fps 动画。
响应式布局系统：根据容器宽度自动计算列数。
悬停暂停：支持两种暂停模式：暂停单个列/行或暂停整个画廊。

使用方法

1. 添加最新版本的 jQuery 库和页面底部的 photocols.js 库。

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Local -->
<script src="/path/to/dist/jquery.photocols.min.js"></script>

<!-- Or from a CDN -->
<script src="https://unpkg.com/jquery.photocols@2/dist/jquery.photocols.min.js"></script>

2. 创建一个空容器来放置照片网格。

<div id="photocols"></div>

3. 用 JS 数据对象构建一组包含详细信息的图片数组，然后调用你刚创建的容器上的插件来初始化照片网格。

var data = [
  { 'title' : 'Title 1' , 'subtitle' : 'bla bla' , 'url' : 'https://www.jqueryscript.net' , 'img' :  '1.jpg' },
  { 'title' : 'Title 2' , 'subtitle' : 'bla bla' , 'url' : 'https://www.jqueryscript.net' , 'img' :  '2.jpg' },
  { 'title' : 'Title 3' , 'subtitle' : 'bla bla' , 'url' : 'https://www.jqueryscript.net' , 'img' :  '3.jpg' },
  ...
];

// Horizontal <a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>ing <a href="https://www.jqueryscript.net/gallery/">Gallery</a>
$('#photocols').photocols({
  data: data,
  direction: 'right',
});

// Parallax Effect with Variable Speed
$('#photocols').photocols({
  data: data,
  variableSpeed: true,
  speedVariation: 0.6,
  animationSpeed: 0.7,
});

// Pause Entire Gallery on Hover
$('#photocols').photocols({
  data: data,
  pauseAllOnHover: true,
});

// Lazy Loading for Performance
$('#photocols').photocols({
  data: data,
  lazyLoad: true,
  lazyLoadThreshold: 150,
  placeholderColor: '#1a1a1a',
});

4. 所有自定义照片网格的配置选项。

bgcolor（CSS 颜色）：容器的背景色。默认是'#000'
width（整数/字符串）：容器宽度。接受像素或 100%支持。默认是'auto''auto'
colswidth（整数）：用于计算列数的基准宽度。默认是200
itemheight（整数）：每个照片项目的高度（像素单位）。默认是300
height（整数）：容器总高度，像素单位。默认是600
gap（整数）：物品之间的间隙（像素单位）。默认是5
opacity（浮动）：照片不透明度叠加（0 到 1）。默认是0.3
titleSize（整数）：标题字体大小（像素单位）。默认是16
subtitleSize（整数）：字幕字体大小（像素）。默认是14
overlayColor（CSS 颜色）：照片叠加的颜色。默认是'#000'
stopOnHover（布尔值）：暂停悬停时的特定列或行动画。默认是true
data（数组）：照片物品的数组。默认是[]
titleTop（整数）：标题垂直位置，从面具顶部开始。默认是56
subtitleTop（整数）：字幕从面具顶部垂直位置。默认是80
maskHeight（整数）：悬浮面罩的高度。默认是120
animationSpeed（整数）：每帧像素动画速度。默认是1
debounceDelay（整数）：调整大小去反弹延迟，以毫秒计。默认是150
direction（弦）：滚动方向。选项为'up''down''left''right'默认是'up'
variableSpeed（布尔值）：支持每列/行的视差变速。默认是。false
speedVariation（浮点）：速度变化范围（0.5 = 基础速度的 50%至 150%）。默认是0.5
pauseAllOnHover（布尔值）：暂停整个画廊，而不是仅暂停活跃的列。默认是false
lazyLoad（布尔值）：使用 IntersectionObserver 实现图像的懒散加载。默认是false
lazyLoadThreshold（整数）：视口前的像素开始加载图像。默认是100
placeholderColor（CSS 颜色）：图像加载时显示的背景色。默认是'#333'

$('#photocols').photocols({
  bgcolor: '#000',
  width: 'auto',
  colswidth: 200,
  itemheight: 300,
  height: 600,
  gap: 5,
  titleSize: 16,
  subtitleSize: 14,
  opacity: 0.3,
  overlayColor: '#000',
  stopOnHover: true,
  data: [],
  titleTop: 56,
  subtitleTop: 80,
  maskHeight: 120,
  animationSpeed: 1,
  debounceDelay: 150,
  direction: 'up', 
  variableSpeed: false,
  speedVariation: 0.5,
  pauseAllOnHover: false,
  lazyLoad: false,
  lazyLoadThreshold: 100, 
  placeholderColor: '#333' 
});

5. API 方法。

// Pauses the animation loop
$('#photocols').photocols('pause');

// Resumes the animation loop
$('#photocols').photocols('resume');

// Rebuilds the layout. Useful if the container size changes dynamically.
$('#photocols').photocols('refresh');

// Removes the plugin, cleans up the DOM, and disconnects observers
$('#photocols').photocols('destroy');

初始发布：2026年4月7日