3

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!

Alga
  • 181
  • 1
  • 5
  • 15
  • I recommend using the perfectMasonry layout plugin (you can find it on github) for isotope, it flows the tiles much better than the default masonry layout. I'm not sure truly fluid responsive isotope is even possible without seriously overhauling some JS... whenever I use it on a responsive site I just cut down on the columns like you mentioned. – Ennui Nov 21 '13 at 18:56

1 Answers1

3

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!

user1010892
  • 1,179
  • 3
  • 14
  • 25
  • Great with perfectMasonry but if you would want fitRows layout what to do? Any one has suggestions? – jtheman Jan 06 '14 at 23:31