hexo-plugin-waterfall

Hexo 瀑布流图片画廊插件，支持 Lightbox 放大预览和图片懒加载。

安装

npm install hexo-plugin-waterfall --save

或者将插件目录复制到 Hexo 项目的 node_modules 目录下。

配置

在 Hexo 的 _config.yml 中添加以下配置：

waterfall:
  enable: true        # 是否启用插件
  columns: 3          # 默认列数
  gap: 10px           # 图片间距
  borderRadius: 5px   # 图片圆角
  lazyload: true      # 启用懒加载
  lightbox: true      # 启用点击放大

使用

在 Markdown 文件中使用 waterfall 标签：

{% waterfall 3 %}
<img alt="图片描述1" src="/images/photo1.jpg"/>
<img alt="图片描述2" src="/images/photo2.jpg"/>
<img alt="图片描述3" src="/images/photo3.jpg"/>
<img alt="图片描述4" src="/images/photo4.jpg"/>
{% endwaterfall %}

参数说明

• 3：可选参数，指定列数。如果不指定，则使用配置文件中的 columns 值。

图片属性

• src：图片路径（必填）
• alt：图片描述（可选），在 Lightbox 中会显示为图片标题

功能特性

瀑布流布局

使用 CSS column-count 实现瀑布流布局，自动响应式适配：

• 桌面端：使用指定列数
• 平板端（<=768px）：2 列
• 手机端（<=480px）：1 列

Lightbox 放大预览

• 点击图片弹出全屏预览
• 左右箭头切换图片
• 键盘支持：← → 切换，ESC 关闭
• 显示图片描述（alt 属性）
• 显示图片计数器

图片懒加载

• 使用 IntersectionObserver API
• 图片进入可视区域时才加载
• 加载前显示占位动画
• 加载完成淡入效果

示例效果

{% waterfall 4 %}
<img alt="春日樱花" src="/gallery/sakura.jpg"/>
<img alt="夏日海滩" src="/gallery/beach.jpg"/>
<img alt="秋日红叶" src="/gallery/autumn.jpg"/>
<img alt="冬日雪景" src="/gallery/winter.jpg"/>
{% endwaterfall %}

License

MIT