Combining Isotope with media queries for responsive images

Question

I know this has been asked before, but all answers I find refer to changing the number of columns on a responsive isotope layout. The problem with this is that while resizing the browser, there are instances in which there is a gap in the container.

What I am after is using isotope + media queries so that the thumbs adjust to the container size while decreasing the number of columns on window resize.

$(document).ready(function () {

var $container = $('#right');
$container.isotope({
    layoutMode: 'fitRows',
    itemSelector: '.thumbs',
    animationEngine: 'best-available',
    resizable: false,

});

$(window).smartresize(function () {
    $container.isotope({
        // update columnWidth to a percentage of container width
        masonry: {
            columnWidth: $container.width() / 3
        }
    });
});

$(window).smartresize();

});

Here's my jsfiddle:

http://jsfiddle.net/Alga/K4EXU/2/

And it kind of works, but there are some strange transitions. I believe there is some colliding between the media query and isotope.

Can anyone help?

Many thanks!

Answer 1

I've been going round for hours today struggling with this - I tried perfectMasonry but for some reason it didn't work... then randomly I came across https://github.com/cubica/isotope-sloppy-masonry

... and so far so good! My setup is that I start with small screen and make my isotope item 100% width, then using media queries I bump up the amount of columns (50%, 33% etc).

Hope this works for you!