Как я могу отображать / скрывать изображения с помощью html / css / jquery / bootstrap и без пустого пространства или смещения?

Question

Я хочу отобразить 6 изображений (3 изображения в строке 1 и 3 в строке 2) на странице, на которой я использую сетку Bootstrap. Изображения могут быть отфильтрованы по изотопу (например, щелчок по значению изотопа «морской» покажет изображения, относящиеся к морскому). Я хочу показать только 3 изображения и, нажав кнопку «Подробнее», показать 3 оставшихся изображения. Изображения должны быть идеально выровнены (когда я показываю все 6 изображений). Когда 3 изображения скрыты, я не хочу, чтобы они занимали место. Кнопка «увидеть больше» должна быть прямо перед первым рядом из трех изображений.

Я прочитал, что мне следует использовать свойство display: none css, но это все еще занимает немного места.

Может кто-нибудь помочь мне достичь этого, пожалуйста?

Заранее большое спасибо!

$('.see-more').on('click', function() {
  if ($(document.querySelectorAll('#batch2')).hasClass('d-none')) {
    $(document.querySelectorAll('#batch2')).removeClass('d-none');
  } else {
    $(document.querySelectorAll('#batch2')).css('display', 'none');
  }
})

<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>

<!-- isotope -->
<div class="row">
  <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>

<!-- images -->
<div class="row homepage-list-container">

  <div class="col-lg-3 col-md-6 homepage-list-item feminity">
    <img src="assets/img/1.jpg" class="img-fluid" alt="">
    <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="">
    <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="">
    <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>

  <!-- Line 2: Shown on click on See More -->
  <div id="batch2" class="col-lg-3 col-md-6 homepage-list-item humor">
    <img src="assets/img/4.jpg" class="img-fluid" alt="">
    <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 id="batch2" class="col-lg-3 col-md-6 homepage-list-item politics">
    <img src="assets/img/5.jpg" class="img-fluid" alt="">
    <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 id="batch2" class="col-lg-3 col-md-6 homepage-list-item marine">
    <img src="assets/img/6.jpg" class="img-fluid" alt="">
    <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>

  <!-- See more button -->
  <div class="row">
    <div class="col-lg-12 d-flex justify-content-center">
      <button class="see-more">See more</button>
      <button class="see-less hidden">See less</button>
    </div>
  </div>

Answer 1

Я уверен, что это могло бы помочь тебе в твоем деле. Просто используйте класс d-none из Bootstrap, он уже есть.

const images = document.getElementsByClassName("img");

function filter(category) {
  Array.from(images).forEach(image => {
    if (category === null || image.dataset.category === category) {
      image.parentElement.classList.remove("d-none");
    } else {
      image.parentElement.classList.add("d-none");
    }
  });
}

.img {
  margin: 10px 0 0;
  
  background-color: #ddd;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<button onclick="filter(null)">all</button>
<button onclick="filter('marine')">marine</button>
<button onclick="filter('life')">life</button>

<div class="row">
  <div class="col-4"><div class="img" data-category="marine">1</div></div>
  <div class="col-4"><div class="img" data-category="life">2</div></div>
  <div class="col-4"><div class="img" data-category="marine">3</div></div>
  <div class="col-4"><div class="img" data-category="life">4</div></div>
  <div class="col-4"><div class="img" data-category="life">5</div></div>
  <div class="col-4"><div class="img" data-category="life">6</div></div>
</div>

Answer 2

В CSS вы можете добавить display: none;, чтобы объекты не отображались, и display: block, чтобы отображать их заново.