自动重新排列 .show 卡片（在投资组合中）jQuery CSS html

Question

我想制作一个带有卡片过滤效果的作品集（点击按钮时只显示与所选类别相关的卡片并隐藏其他 none 相关卡片）为此，我将卡片分为两类(类) 作为书籍和文章。

当我单击“文章”按钮时，.show 卡片保留在它们在网格中的原始位置 (UI) 并且 UI 中的 .hide 卡片空间看起来是空白而不是重新显示正在安排 .show 卡片以填补空白。

所以需要让展示卡片自动排列而不显示 (UI) 中的空白区域。

when click the button "all"

when click the button "articles"

<script>
    $(document).ready(function(){
        $(".all").click(function(){
        $(".all").show();
    });

    $(".booksB").click(function(){
        $(".books").show();$(".articles").hide()
        });

        $(".articlesB").click(function(){
        $(".books").hide();$(".articles").show()
    });
    });

Html 代码

<section class="banner" style="background: linear-gradient(to bottom right,hsl(0, 100%, 2%),white); width: auto; padding: 100px 0 200px;"> 
    <section id="portfolio" class="portfolio">
      <div class="row aos-int aos-animate" data-aos="fade-up" data-aos-delay="100">
        <div class="col-lg-12 d-flex justify content-center">
          <div class="empty " style="width: auto; margin-top: 80px;">

          </div>
          <div id="myBtnContainer" style= " margin-top:-200px ;margin: auto ; align-items: center;">
            <button class="all button-33 active" role="button" ; onclick="fb1">All</button>
            <button class="booksB button-33" role="button" onclick="fb2">Books</button>
            <button class="articlesB button-33" role="button"  ; onclick="fb3">Articles</button>
           
          </div>
        </div>
      </div>
    </section>
    <div class="container" >
      <div class="row "style="margin: auto;  align-items: center;">
        <div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
          <div class="all books"> 
            <div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
              <img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3"  alt="Drops of Ocean">
              <div class="card-body">
                <h5 class="card-title">Albert Einstein - Drops on the Ocean</h5>
                <p class="card-text">Biography <br> <br>
                  Publisher: Sanhinda Publishers
                </p>
                <a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
              </div>
            </div>
          </div>  
        </div>
        <div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
          <div class="all books"> 
            <div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
              <img src="img/book05268.jpg" class="card-img-top embed-responsive embed-responsive-4by3"  alt="Drops of Ocean">
              <div class="card-body">
                <h5 class="card-title">Asandimiththa -translation</h5>
                <p class="card-text">Biography <br> <br>
                  Publisher: Sarasavi Publishers
                </p>
                <a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
              </div>
            </div>
          </div>  
        </div>
        <div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
          <div class="all articles"> 
            <div class="card shadow bg-light mb-3 filterDiv " style="max-width: 18rem;">
              <img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3"  alt="Drops of Ocean">
              <div class="card-body">
                <h5 class="card-title">Article 01</h5>
                <p class="card-text">Biography <br> <br>
                  Mora Spirit 
                </p>
                <a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
              </div>
            </div>
          </div>  
        </div>
        <div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
          <div class="all articles"> 
            <div class="card shadow bg-light mb-3 filterDiv " style="max-width: 18rem;">
              <img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3"  alt="Drops of Ocean">
              <div class="card-body">
                <h5 class="card-title">Article 02</h5>
                <p class="card-text">Biography <br> <br>
                  Mora Spirit
                </p>
                <a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
              </div>
            </div>
          </div>  
        </div>
        <div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
          <div class="all articles"> 
            <div class="card shadow bg-light mb-3 filterDiv " style="max-width: 18rem;">
              <img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3"  alt="Drops of Ocean">
              <div class="card-body">
                <h5 class="card-title">Article 04</h5>
                <p class="card-text">Biography <br> <br>
                  Mora spirit
                </p>
                <a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
              </div>
            </div>
          </div>  
        </div>
        <div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
          <div class="all books"> 
            <div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
              <img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3"  alt="Drops of Ocean">
              <div class="card-body">
                <h5 class="card-title">Book 03</h5>
                <p class="card-text">Biography <br> <br>
                  Publisher: Sarasavi
                </p>
                <a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
              </div>
            </div>
          </div>  
        </div>
        <div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
          <div class="all articles"> 
            <div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
              <img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3"  alt="Drops of Ocean">
              <div class="card-body">
                <h5 class="card-title">Article 06</h5>
                <p class="card-text">Biography <br> <br>
                  Sunday Observer
                </p>
                <a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
              </div>
            </div>
          </div>  
        </div>
    </div>  
  </section>

请大家帮帮我

Answer 1

JavaScript 部分没问题，但您将目标类添加到了错误的元素中。您应该将您定位的类（.all、.books、.articles）添加到 .portfolio-item 元素。

示例：更改

<div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
    <div class="all books"> 
        <div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
            <img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3"  alt="Drops of Ocean">
            <div class="card-body">
                <h5 class="card-title">Albert Einstein - Drops on the Ocean</h5>
                <p class="card-text">Biography <br> <br>
                    Publisher: Sanhinda Publishers
                </p>
                <a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
            </div>
        </div>
    </div>  
</div>

致此

<div class="col-lg-3 col-md-6 portfolio-item all books" style="justify-content: center;" >
    <div> 
        <div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
            <img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3"  alt="Drops of Ocean">
            <div class="card-body">
                <h5 class="card-title">Albert Einstein - Drops on the Ocean</h5>
                <p class="card-text">Biography <br> <br>
                    Publisher: Sanhinda Publishers
                </p>
                <a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
            </div>
        </div>
    </div>  
</div>

自动重新排列 .show 卡片（在投资组合中）jQuery CSS html

Auto rearrange .show cards (in a portfolio) jQuery CSS html

html

javascript

css

jquery

card