同位素过滤不起作用，我做错了什么？

如何解决同位素过滤不起作用，我做错了什么？

您可以在此处查看网页并检查：https://gryddigital.com/portfolio.html

这是我用于过滤器的 html：

<div class="filters pb-2">
<ul class="list-inline text-center">
<li class="list-inline-item"><a data-filter="*" href="#" class="active">All</a></li>
<li class="list-inline-item"><a data-filter=".photo" href="#">Photography</a></li>
<li class="list-inline-item"><a data-filter=".stage" href="#">Virtual Staging</a></li>
</ul>
</div>

这是我用于画廊的 html：

  <div class="gallery">

    <div class="container-fluid" data-toggle="modal" data-target="#exampleModal">

      <div class="row no-gutters">

        <div class="col-12 col-sm-6 col-lg-3 photo gallery-item gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/com_01_sm.jpg" data-target="#carouselExample" data-slide-to="0">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item photo gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_01_sm.jpg" data-target="#carouselExample" data-slide-to="1">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item photo gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_02_sm.jpg" data-target="#carouselExample" data-slide-to="2">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item photo gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_03_sm.jpg" data-target="#carouselExample" data-slide-to="3">
            <i class="fas fa-plus"></i>
        </div>

      </div>

      <div class="row no-gutters">

        <div class="col-12 col-sm-6 col-lg-3 gallery-item photo gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_04_sm.jpg" data-target="#carouselExample" data-slide-to="4">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item photo gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_05_sm.jpg" data-target="#carouselExample" data-slide-to="5">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item stage gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_06_sm.jpg" data-target="#carouselExample" data-slide-to="6">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item stage gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_07_sm.jpg" data-target="#carouselExample" data-slide-to="7">
            <i class="fas fa-plus"></i>
        </div>

      </div>
    </div>
  </div>

这是JS：

var $grid = $('.gallery').imagesLoaded( function() {
$grid.isotope({
      // set itemSelector so .grid-sizer is not used in layout
      itemSelector: '.gallery-item',layoutMode: 'fitRows'
    })
  });

$(".filters ul li a").on('click',function() {
    $(".filters ul li a").removeClass("active");
    $(this).addClass("active");
    
    var selector = $(this).attr("data-filter");
    $grid.isotope({
       filter: selector    
    });
    return false
});

请帮忙！我在某个地方犯了一个愚蠢的错误吗？此外，在我实现图像加载之前，过滤器正在工作，但随后网格全部聚集在页脚处，因为它没有正确加载。

解决方法

首先，如果你不从中吸取教训，错误只会是愚蠢的。

接下来我认为 imagesLoaded 可能是您问题的开始，网站页面上的脚本未加载。由于 imagesLoaded 未定义，这意味着用作回调的函数将永远不会运行。解决此问题后，您将更好地了解需要进行哪些调试。

您说过滤器在 imagesLoaded 之前可以工作，但是网格在页脚处都堆在一起。这通常意味着这些图像是在 isotope 计算每个元素的大小之后加载的。

var $grid = $('.gallery').imagesLoaded(function() {
  $grid.isotope({
    // set itemSelector so .grid-sizer is not used in layout
    itemSelector: '.gallery-item',layoutMode: 'fitRows'
  });

// imagesLoaded returns a "deferred" object
// https://github.com/desandro/imagesloaded#jquery
// that we can chain to run
// a callback when everything is done
}).done(function() {

  // isotope now will recalculate the grid elements size 
  // https://isotope.metafizzy.co/methods.html#layout
  $grid.isotope('layout');
});

一旦 isotope 重新计算，应该可以解决图像堆积的问题。