是否可以将数据过滤器调整到定义的网格中，以便所有图像出现在COL-12中或特定尺寸？

Question

我有一个很好的Loking Box Grid

但是，在添加数据过滤器并在过滤器之间切换后，图像显示在与我设计的网格相同的确切位置和大小中。拥有一个数据过滤器以一个尺寸显示所有过滤图像是否可行？ 这是我的网格代码，

 <div class="container">
  <div class="text-center">
      <button class="btn btn-default filter-button" 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">
    <style>
      .container-box{
     width: 600px;  }
    </style>
      <div class="row">
        <div class="col-12"><img width="600" class="img-fluid pb-3 filter bootstrax " 
      src="./images/01.jpg" alt=""></div>
      </div>
      <div class="row g-3">
        <div class="col-4"><img width="200" class="img-fluid filter bootstrap" 
      src="./images/02.jpg" alt=""></div>
        <div class="col-4"><img width="200" class="img-fluid filter purecss" 
      src="./images/03.jpg" alt=""></div>
        <div class="col-4"><img width="200" class="img-fluid filter bootstrax" 
      src="./images/04.jpg" alt=""></div>
      </div>
      </div>
      </div>

           

$(document).ready(function() {
$(".filter-button").click(function(e) {
  var value = $(this).attr("data-filter");
  if (value == "all") {
    $(".filter").show("1000");
  } else {
    $(".filter").filter("." + value).show("3000");
    $(".filter").not("." + value).hide("3000");
  }
});

if ($(".filter-button").removeClass("active")) {
  $(this).removeClass("active");
}
$(this).addClass("active");
 });

可以在JS，CSS和HTML中实现该结果吗？另外，如果有人有更好的建议，请启发我。

Answer 1

您可以通过在脚本区域中添加以下cdn来使用同位JS库：

      <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

您仍然可以使用嵌套的画廊结构并使用同位素使用数据过滤器，也可以使用同位素，也可以正确地显示一个旁边的图像，当然也可以显示一个extrestope。仍将具有不会受到影响的相同网格结构。

<div class="container text-center pt-5">
<div class="row">
<div class="col-md-12">
  <div class="filters">
    <h4>Featured categories</h4>
    <ul>
      <li data-filter=".idea">Furniture <img class="dot" src="./images/dot.svg" 
      alt=""></li>
      <li data-filter=".ui">lighting <img class="dot" src="./images/dot.svg" 
      alt=""></li>
      <li data-filter=".ux">Accessories <img class="dot" src="./images/dot.svg" 
      alt=""></li>
      <li data-filter=".code">Tailor-made objects <img class="dot" 
      src="./images/dot.svg" alt=""></li>
      <li class="is-checked fp" data-filter="*">All</li>
    </ul>
  </div>
</div>

<div class="col-md-12">
  <div class="rows grid data-isotope='{ "itemSelector": ".grid-item", "masonry": 
    { "columnWidth": 200 } }'">
    <div class="col-md-12 grid-item code">
      <img class="img-fluid" src="./images/01.jpg" alt="">
    </div>
       <div class="col-md-4 grid-item ux ">
      <img class="img-fluid img-grid" src="./images/02.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item ui">
      <img class="img-fluid img-grid" src="./images/03.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item idea">
      <img class="img-fluid img-grid" src="./images/04.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item ux ">
      <img class="img-fluid img-grid" src="./images/02.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item ui">
      <img class="img-fluid img-grid" src="./images/03.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item idea">
      <img class="img-fluid img-grid" src="./images/04.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item ux ">
      <img class="img-fluid img-grid" src="./images/02.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item ui">
      <img class="img-fluid img-grid" src="./images/03.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item idea">
      <img class="img-fluid img-grid" src="./images/04.jpg" alt="">
    </div>
  </div>
</div>

并使用以下脚本以及

var $grid = $('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows',
});

 // change is-checked class on buttons
 var $buttonGroup = $('.filters');
 $buttonGroup.on( 'click', 'li', function( event ) {
 $buttonGroup.find('.is-checked').removeClass('is-checked');
 var $button = $( event.currentTarget );
 $button.addClass('is-checked');
 var filterValue = $button.attr('data-filter');
 $grid.isotope({ filter: filterValue });
 });

好运