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

问题描述

您可以在此处查看网页并检查：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
});

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）