masonry container resize

Question

I am using Masonry to organise images on a portfolio site. Is there a way to change the width from the gutter, if the size of the container changes?

Thanks a lot!

Bart

Make an effort and show your jsfiddle or link to your online development sandbox so one can see what you've tried. It's also not clear, what "...width from the gutter..." is supposed to mean? — Systembolaget, Oct 03 '12 at 19:10

score 2 · Answer 1 · edited May 23 '17 at 10:24

An easy solution for what you're looking for would be to have a jQuery $(window).resize() event listener, and check for the .width() of the window, and depending on the widths, you can have a totally separate call. I tried it and it works pretty well...

var $gridElement = $(".grid-elements").masonry({
     columnWidth: 150,
     gutterWidth: 12,
});

$(window).resize(function(){
    var width = $(window).width();

    if(width > 1000) {
         console.log('greater than 1000');
         $gridElement.masonry({
              columnWidth: 150, // different column width here
              gutterWidth: 6, // different gutter width here
         });
    } else if (width < 1000) {
         console.log('less than 1000');
         $gridElement.masonry({
              columnWidth: 150, // different column width here
              gutterWidth: 12, // different gutter with here
         });
    }
});

So, as you can see, we cache the ".grid-elements" jQuery selection with the .masonry() call, and then within our .resize() handler function we check the width of the window, and recall the .masonry() method with a new set of options.

Also keep in mind, the above code doesn't debounce, so it will be calling .masonry() for every pixel you resize. You can check out the answer to this Stack question for that.

masonry container resize

1 Answers1