如何用JavaScript实现图片元素分组显隐及unitegallery子图库制作

1. 标记图片分组 #

给每个图库元素添加自定义属性（比如data-gallery-group）区分不同子图库，同时准备控制显隐的按钮：

<!-- 分组控制按钮 -->
<div class="gallery-filters">
  <button data-filter="all">全部图片</button>
  <button data-filter="nature">自然风景</button>
  <button data-filter="people">人像摄影</button>
  <button data-filter="objects">静物特写</button>
</div>

<!-- UniteGallery容器 -->
<div id="my-gallery">
  <img src="nature-1.jpg" alt="山景" data-gallery-group="nature">
  <img src="nature-2.jpg" alt="海景" data-gallery-group="nature">
  <img src="people-1.jpg" alt="人物1" data-gallery-group="people">
  <img src="people-2.jpg" alt="人物2" data-gallery-group="people">
  <img src="objects-1.jpg" alt="静物1" data-gallery-group="objects">
  <img src="objects-2.jpg" alt="静物2" data-gallery-group="objects">
</div>

2. 初始化UniteGallery #

加载UniteGallery依赖文件后，初始化图库（可按需配置主题、布局参数）：

jQuery(document).ready(function() {
  // 初始化图库并获取实例对象
  const galleryInstance = jQuery("#my-gallery").unitegallery({
    gallery_theme: "tiles", // 示例主题，可替换为其他主题
    tiles_type: "nested" // 根据布局需求调整
  });
});

3. 实现分组显隐逻辑 #

通过按钮点击事件过滤图片，控制显隐后刷新图库确保界面更新：

jQuery(document).ready(function() {
  const galleryInstance = jQuery("#my-gallery").unitegallery({
    gallery_theme: "tiles"
  });

  // 绑定过滤按钮点击事件
  jQuery(".gallery-filters button").on("click", function() {
    const targetGroup = jQuery(this).data("filter");

    // 遍历所有图片元素，按分组控制显隐
    jQuery("#my-gallery img").each(function() {
      const imgGroup = jQuery(this).data("gallery-group");
      if (targetGroup === "all" || imgGroup === targetGroup) {
        jQuery(this).show();
      } else {
        jQuery(this).hide();
      }
    });

    // 刷新图库，让显隐变更生效
    galleryInstance.refresh();
  });
});

关键注意事项 #

• 自定义属性名称可自行调整，只要保持分组标记一致即可。
• 若使用其他类似图库脚本，核心逻辑通用：用属性标记分组 → 点击时过滤元素显隐 → 调用图库的刷新/重绘方法。
• 如需过渡效果，可给图片添加CSS动画后再调用图库刷新。

内容的提问来源于stack exchange，提问作者Roman Simonyan