Bootstrap+Isotope场景下图片显隐无空白错位实现求助

先梳理下你代码里的几个关键问题，再给出完整的修复方案，保证完全贴合你的需求：

关键问题修正 #

• 重复ID违规：你给3个隐藏元素都用了id="batch2"，这不符合HTML规范（ID必须唯一），改成class="batch2"才是正确的做法。
• 按钮位置调整：把"See more"按钮容器移到图片容器的前面，满足你“置于第一行图片之前”的要求。
• Isotope兼容处理：元素显示/隐藏后，必须通知Isotope重新计算布局，否则筛选时会出现排版错乱。

完整实现代码 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>

<!-- See more/less 按钮 - 移至图片容器之前 -->
<div class="row mb-3">
  <div class="col-lg-12 d-flex justify-content-center">
    <button class="see-more">See more</button>
    <button class="see-less d-none">See less</button>
  </div>
</div>

<!-- Isotope 筛选栏 -->
<div class="row mb-3">
  <div class="col-lg-12 d-flex justify-content-center">
    <ul id="homepage-list-filters">
      <li data-filter="*" class="filter-active">All</li>
      <li data-filter=".feminity">Feminity</li>
      <li data-filter=".marine">Marine species</li>
      <li data-filter=".life">Life moments</li>
      <li data-filter=".humor">Humor</li>
      <li data-filter=".politics">French politics</li>
    </ul>
  </div>
</div>

<!-- 图片容器 -->
<div class="row homepage-list-container">
  <!-- 初始显示的3张图片 -->
  <div class="col-lg-3 col-md-6 homepage-list-item feminity">
    <img src="assets/img/1.jpg" class="img-fluid" alt="Eva">
    <div class="homepage-item-info">
      <h4>Eva</h4>
      <a class="homepage-item-seedetails" title="See details">
        <i class="fas fa-info homepage-item-seedetails-CTA"></i>
      </a>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 homepage-list-item politics">
    <img src="assets/img/2.jpg" class="img-fluid" alt="François M.">
    <div class="homepage-item-info">
      <h4>François M.</h4>
      <a class="homepage-item-seedetails" title="See details">
        <i class="fas fa-info homepage-item-seedetails-CTA"></i>
      </a>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 homepage-list-item feminity">
    <img src="assets/img/3.jpg" class="img-fluid" alt="Clemence">
    <div class="homepage-item-info">
      <h4>Clemence</h4>
      <a class="homepage-item-seedetails" title="See details">
        <i class="fas fa-info homepage-item-seedetails-CTA"></i>
      </a>
    </div>
  </div>
  <!-- 需要点击显示的3张图片 - 初始用d-none隐藏，完全不占空间 -->
  <div class="col-lg-3 col-md-6 homepage-list-item humor batch2 d-none">
    <img src="assets/img/4.jpg" class="img-fluid" alt="Edmond">
    <div class="homepage-item-info">
      <h4>Edmond</h4>
      <a class="homepage-item-seedetails" title="See details">
        <i class="fas fa-info homepage-item-seedetails-CTA"></i>
      </a>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 homepage-list-item politics batch2 d-none">
    <img src="assets/img/5.jpg" class="img-fluid" alt="François">
    <div class="homepage-item-info">
      <h4>François</h4>
      <a class="homepage-item-seedetails" title="See details">
        <i class="fas fa-info homepage-item-seedetails-CTA"></i>
      </a>
    </div>
  </div>
  <div class="col-lg-3 col-md-6 homepage-list-item marine batch2 d-none">
    <img src="assets/img/6.jpg" class="img-fluid" alt="Léon">
    <div class="homepage-item-info">
      <h4>Léon</h4>
      <a class="homepage-item-seedetails" title="See details">
        <i class="fas fa-info homepage-item-seedetails-CTA"></i>
      </a>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  // 初始化Isotope，适配Bootstrap栅格布局
  var $grid = $('.homepage-list-container').isotope({
    itemSelector: '.homepage-list-item',
    layoutMode: 'fitRows'
  });

  // 筛选功能逻辑
  $('#homepage-list-filters li').on('click', function() {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
    // 更新筛选按钮激活状态
    $('#homepage-list-filters li').removeClass('filter-active');
    $(this).addClass('filter-active');
  });

  // See more 点击逻辑
  $('.see-more').on('click', function() {
    $('.batch2').removeClass('d-none');
    $(this).addClass('d-none');
    $('.see-less').removeClass('d-none');
    // 通知Isotope重新计算布局
    $grid.isotope('layout');
  });

  // See less 点击逻辑
  $('.see-less').on('click', function() {
    $('.batch2').addClass('d-none');
    $(this).addClass('d-none');
    $('.see-more').removeClass('d-none');
    // 通知Isotope重新计算布局
    $grid.isotope('layout');
  });
});
</script>

核心功能说明 #

1. 隐藏元素不占空间：使用Bootstrap内置的d-none类，它的本质是display: none !important，完全不会占用页面空间，彻底解决你担心的空间残留问题。
2. 按钮位置合规：把按钮容器移到图片容器和筛选栏的前面，完美满足“置于第一行图片之前”的需求。
3. Isotope兼容保障：每次切换显示/隐藏后调用$grid.isotope('layout')，让Isotope重新计算元素位置，确保筛选和排版始终正确。
4. 按钮交互优化：通过d-none类切换"See more"和"See less"按钮的显示状态，交互逻辑更清晰直观。

这样就能实现你想要的全部效果：默认显示3张图片，点击按钮切换显示全部，隐藏元素不占空间，Isotope筛选功能正常工作，图片始终保持完美对齐。

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