CODEWITHSUNDEEP
javascriptjquerymasonry
Johnny
Johnny

Reputation: 9964

Masonry goes to one column after hiding and showing divs

I looked around a bit but I couldn't find something that would fix my problem. Basically I have a masonry layout where each item is 25% wide, and they all fit on the same page. I have some buttons at the top which will show or hide items when the user clicks on them based on other data. So I have my masonry like this:

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

And when the user clicks on one of the options, this happens:

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

            });

So I'm running the masonry function again to try and get everything to reorder and fit again. However when you click on one of the buttons, all the '.gallery-item's go into a single column. I'm not exactly sure what I'm doing wrong. Any ideas?

Upvotes: 0

Views: 872

Answers (2)

Johnny
Johnny

Reputation: 9964

Okay I figured it out, for anyone wondering you have to set columnWidth. For me since it was a reflexive columnWidth, I just set it to the class of the item like this:

columnWidth: '.gallery-item'

Upvotes: 1

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

Try using isotope with masonry layout. It works much better for filtering and it is made by the same guy :)

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

Upvotes: 1

Related Questions