jQuery Masonry / Isotope and fluid images: Momenta

Question

I've noticed that when using jQuery Isotope or Masonry with a fluid / responsive website, the elements overlap momentarily whilst the browser window is being resized. Please see the images below, which are screenshots from this demo. You can also see this happening on the Isotope website.

Is there anything that can be done to avoid this overlapping?

Answer 1

For Isotope version 3 use:

$(window).resize(function(){ $('.grid').isotope('layout'); });

to avoid overlapping grid items.

Answer 2

Thanks for you above comments...i got the answer for my problem from here but how i just want to explain to u-> i am using ajax page load using isotope so my code is-

var $container = $('your main container in which your all item will get listed');
 $container.imagesLoaded(function () {
     $container.isotope({
         itemSelector: 'figure',
         filter: '*',
         resizable: false,
         animationEngine: 'jquery'
     });
 });

after that when i call my ajax use to call this function

$("#filter-container").isotope('reLayout');

On first page load there will be some data on page so isotope will adjust all that and after appending ajax loaded data isotope will re arrange all of them.

Answer 3

Thanks to Osvaldas Valutis for answering this question over on his blog post (http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout).

--

For Masonry:

$(window).resize(function(){ $('#list').masonry('reload'); });

And the following works for me, using Isotope:

$(window).resize(function(){ $('#list').isotope('reLayout'); });

--

Thanks again, Osvaldas.