我正在更新一个旧网站，我有一个图片库，其中包含未知数量的项目，使用flexbox布局来均匀地将缩略图按行隔开。我还使用fancybox来显示全尺寸的图像，并使用一点jquery设置了类别过滤器。
在初始页面加载时，库将按预期显示。当应用过滤器时，缩略图的最后一行不再遵守“间距”属性。
在此演示：Image Gallery
以下是HTML/CSS/JS的一些片段：
超文本标记语言：

<div id="galleryTab">
    <a data-rel="all"  href="javascript:;" class="filter active rg-btn">View all</a>
    <a data-rel="baby" href="javascript:;" class="filter rg-btn">Baby & Gender Reveal</a>
    <a data-rel="birthday" href="javascript:;" class="filter rg-btn">Birthday</a>
    <a data-rel="kidsbday" href="javascript:;" class="filter rg-btn">Kids Birthday</a>
    <a data-rel="butterflies" href="javascript:;" class="filter rg-btn">Butterflies</a>
    <a data-rel="custom" href="javascript:;" class="filter rg-btn">Custom Orders</a>
<a data-rel="everyday" href="javascript:;" class="filter rg-btn">Everyday Celebrations</a>
<a data-rel="special" href="javascript:;" class="filter rg-btn">Special Occasions & Other</a>
<a data-rel="wedding" href="javascript:;" class="filter rg-btn">Wedding Cakes</a>
</div>
<div class="gallery-images">
    <div><a class="fancybox" data-fancybox="gallery" data-filter="baby" href="/img/cakes/baby01.jpg"><img class="gallery-image" src="/img/cakes/thumbs/baby01.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="baby" href="/img/cakes/baby02.jpg"><img class="gallery-image" src="/img/cakes/thumbs/baby02.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="baby" href="/img/cakes/baby03.jpg"><img class="gallery-image" src="/img/cakes/thumbs/baby03.jpg" alt="" /></a></div>

    <div><a class="fancybox" data-fancybox="gallery" data-filter="birthday" href="/img/cakes/bday01.jpg"><img class="gallery-image" src="/img/cakes/thumbs/bday01.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="birthday" href="/img/cakes/bday02.jpg"><img class="gallery-image" src="/img/cakes/thumbs/bday02.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="birthday" href="/img/cakes/bday03.jpg"><img class="gallery-image" src="/img/cakes/thumbs/bday03.jpg" alt="" /></a></div>

    <div><a class="fancybox" data-fancybox="gallery" data-filter="butterflies" href="/img/cakes/bf01.jpg"><img class="gallery-image" src="/img/cakes/thumbs/bf01.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="butterflies" href="/img/cakes/bf02.jpg"><img class="gallery-image" src="/img/cakes/thumbs/bf02.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="butterflies" href="/img/cakes/bf03.jpg"><img class="gallery-image" src="/img/cakes/thumbs/bf03.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="butterflies" href="/img/cakes/bf04.jpg"><img class="gallery-image" src="/img/cakes/thumbs/bf04.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="butterflies" href="/img/cakes/bf05.jpg"><img class="gallery-image" src="/img/cakes/thumbs/bf05.jpg" alt="" /></a></div>

    <div><a class="fancybox" data-fancybox="gallery" data-filter="custom" href="/img/cakes/custom07.jpg"><img class="gallery-image" src="/img/cakes/thumbs/custom07.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="custom" href="/img/cakes/custom08.jpg"><img class="gallery-image" src="/img/cakes/thumbs/custom08.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="custom" href="/img/cakes/custom09.jpg"><img class="gallery-image" src="/img/cakes/thumbs/custom09.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="custom" href="/img/cakes/custom10.jpg"><img class="gallery-image" src="/img/cakes/thumbs/custom10.jpg" alt="" /></a></div>

    <div><a class="fancybox" data-fancybox="gallery" data-filter="everyday" href="/img/cakes/ec04.jpg"><img class="gallery-image" src="/img/cakes/thumbs/ec04.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="everyday" href="/img/cakes/ec05.jpg"><img class="gallery-image" src="/img/cakes/thumbs/ec05.jpg" alt="" /></a></div>

</div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="wedding" href="/img/cakes/wed20.jpg"><img class="gallery-image" src="/img/cakes/thumbs/wed20.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="wedding" href="/img/cakes/wed21.jpg"><img class="gallery-image" src="/img/cakes/thumbs/wed21.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="wedding" href="/img/cakes/wed22.jpg"><img class="gallery-image" src="/img/cakes/thumbs/wed22.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="wedding" href="/img/cakes/wed23.jpg"><img class="gallery-image" src="/img/cakes/thumbs/wed23.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="wedding" href="/img/cakes/wed24.jpg"><img class="gallery-image" src="/img/cakes/thumbs/wed24.jpg" alt="" /></a></div>
    <div><a class="fancybox" data-fancybox="gallery" data-filter="wedding" href="/img/cakes/wed25.jpg"><img class="gallery-image" src="/img/cakes/thumbs/wed25.jpg" alt="" /></a></div>
</div>

字符串
CSS：

.gallery-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

型
JS：

jQuery(function ($) {
    // filter selector
    $(".filter").on("click", function () {
        var $this = $(this);
        // if we click the active tab, do nothing
        if ( !$this.hasClass("active") ) {
            $(".filter").removeClass("active");
            $this.addClass("active"); // set the active tab
            // get the data-rel value from selected tab and set as filter
            var $filter = $this.data("rel"); 
            // if we select view all, return to initial settings and show all
            $filter == 'all' ? 
                $(".fancybox")
                .attr("data-fancybox", "gallery")
                .not(":visible")
                .fadeIn() 
            : // otherwise
                $(".fancybox")
                .fadeOut(0)
                .filter(function () {
                    // set data-filter value as the data-rel value of selected tab
                    return $(this).data("filter") == $filter; 
                })
                // set data-fancybox and show filtered elements
                .attr("data-fancybox", $filter)
                .fadeIn(1000); 
        } // if
    }); // on
}); // ready

型
我尝试了不同的justify-content属性，但没有成功。怎么回事？