javascript - 隐藏和显示 div 后，Masonry 会转到一列

Question

我环顾四周，但找不到可以解决我的问题的东西。基本上我有一个砖石布局，其中每个项目的宽度为 25%，并且它们都适契约(Contract)一页面。我在顶部有一些按钮，当用户根据其他数据单击它们时，它们将显示或隐藏项目。所以我的 masonry 是这样的:

            $('.gallery-holder').masonry({
                itemSelector: '.gallery-item',
                isAnimated: true,
                isResizeBound: false
            }).imagesLoaded(function() {
                $('.gallery-holder').masonry('reloadItems');
            });

当用户单击其中一个选项时，会发生这种情况:

            $('.portfolio-header-holder h1').on('click', function() {


                if(!$(this).hasClass('current')) {
                    $('.portfolio-header-holder h1').removeClass('current')
                    var pclass = $(this).attr('class');

                    $(this).addClass('current')
                    $('.gallery-holder .gallery-item').show();

                    $('.gallery-holder .gallery-item:not(.'+pclass+')').hide();                     

                } else {
                    $(this).removeClass('current');
                    $('.gallery-holder .gallery-item').show();
                }

                $('.gallery-holder').masonry({
                    itemSelector: '.gallery-item',
                    isAnimated: true,
                });

            });

因此，我再次运行 masonry 函数，尝试让所有内容重新排序并再次适合。但是，当您单击其中一个按钮时，所有“.gallery-item”都会进入一列。我不太确定我做错了什么。有什么想法吗？

Answer 1

尝试使用同位素和砖石布局。它的过滤效果更好，而且是同一个人制作的:)

http://isotope.metafizzy.co/layout-modes/masonry.html