如何实现data-filter筛选后网格图片统一以col-12或指定尺寸展示

当前实现筛选后布局错乱的核心原因有3个：

• 布局结构写死：首图单独放在占满整行的col-12栅格中，其余3张图固定放在三列col-4的行容器内，筛选逻辑仅对img标签做显示/隐藏，外层栅格结构完全没有变化，自然保留初始的位置和尺寸。
• 按钮激活态逻辑位置错误：active类的增删逻辑写在了click事件回调外部，this指向不匹配，按钮选中状态从来没有正常生效。
• 硬编码尺寸问题：img标签写了固定内联width属性，加上内嵌在HTML中的style标签，既不利于维护，也无法适配筛选后的尺寸变化。

完全可以通过HTML+CSS+JS原生实现需求，不需要引入额外插件，以下是修正后的完整代码：

CSS样式（建议统一放在外部CSS文件或页面head中） #

.container-box {
  width: 600px;
  margin: 0 auto;
}
/* 筛选按钮激活样式 */
.filter-button.active {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}
/* 筛选状态默认网格：所有图片统一尺寸，三列等宽排布 */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* 全量显示状态：首图占满整行，还原初始设计的视觉效果 */
.filter-grid.show-all .filter-item:first-child {
  grid-column: 1 / -1;
}
/* 全量显示状态下首图高度自适应 */
.filter-grid.show-all .filter-item:first-child img {
  height: auto;
}
/* 图片统一适配容器，避免拉伸变形 */
.filter-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
/* 筛选未命中的元素隐藏 */
.filter-item.hidden {
  display: none;
}

HTML结构 #

<div class="container">
  <div class="text-center mb-4">
      <button class="btn btn-default filter-button active" data-filter="all">All</button>
      <button class="btn btn-default filter-button" data-filter="bootstrap">BootStrap</button>
      <button class="btn btn-default filter-button" data-filter="bootstrax">BootStrax</button>
      <button class="btn btn-default filter-button" data-filter="purecss">Pure CSS</button>
  </div>
  <div class="container container-box">
    <div class="filter-grid show-all" id="filterContainer">
      <div class="filter-item bootstrax">
        <img class="img-fluid" src="./images/01.jpg" alt="">
      </div>
      <div class="filter-item bootstrap">
        <img class="img-fluid" src="./images/02.jpg" alt="">
      </div>
      <div class="filter-item purecss">
        <img class="img-fluid" src="./images/03.jpg" alt="">
      </div>
      <div class="filter-item bootstrax">
        <img class="img-fluid" src="./images/04.jpg" alt="">
      </div>
    </div>
  </div>
</div>

JS逻辑 #

$(document).ready(function() {
  const $grid = $('#filterContainer');
  $('.filter-button').on('click', function() {
    // 切换按钮选中态
    $('.filter-button').removeClass('active');
    $(this).addClass('active');

    const filterKey = $(this).data('filter');
    if (filterKey === 'all') {
      // 全选时加载大首图布局，显示所有项
      $grid.addClass('show-all');
      $grid.find('.filter-item').fadeIn(300);
    } else {
      // 分类筛选时切换为统一三列布局，匹配类目的显示，不匹配的隐藏
      $grid.removeClass('show-all');
      $grid.find('.filter-item').each(function() {
        $(this).hasClass(filterKey) ? $(this).fadeIn(300) : $(this).fadeOut(300);
      })
    }
  })
})

• 不要在body内部内嵌<style>标签，也尽量不要给元素写固定内联样式，统一抽离CSS方便维护，也能避免样式优先级混乱。
• 筛选类场景不要用固定拆分row的Bootstrap栅格，元素隐藏后栅格不会自动重排，用CSS Grid实现灵活度更高，不需要手动调整行列嵌套结构。
• 图片适配容器时建议搭配object-fit: cover，可以保证统一尺寸的同时不会出现拉伸变形。
• 如果后续需要增加排序、瀑布流、复杂筛选动画，可以直接使用成熟的网格筛选库，减少重复开发成本。

内容的提问来源于stack exchange，提问作者Pavel Ants