Sam Sam - 13 days ago 5
CSS Question

jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize

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?

Before resizing the browser window: a nicely spaced grid of images

During resizing: overlapping!

After resizing: back to the nice grid.

Sam Sam
Answer

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.

Comments