Question

我环顾四周但是我找不到可以解决问题的东西。基本上我有一个砖石布局，每个项目的宽度为25％，它们都适合在同一页面上。我在顶部有一些按钮，当用户根据其他数据点击它们时，它们会显示或隐藏项目。所以我有这样的砌石：

            $('.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,
                });

            });

所以我再次运行砌体功能试图让所有东西重新排序并再次适合。但是，当您点击其中一个按钮时，所有＆＃39; .gallery-item都会进入一个列。我不确定我做错了什么。有什么想法吗？

Answer 1

尝试使用同位素和砌体布局。它对过滤效果更好，它由同一个人制作：）

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

Answer 2

好吧我想通了，因为有人想知道你必须设置columnWidth。对我来说，因为它是一个自反的columnWidth，我只是将它设置为项目的类，如下所示：

columnWidth: '.gallery-item'

在隐藏并显示div之后，砌体进入一列

2 个答案: