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?

<img src="https://i.stack.imgur.com/bz1v9.jpg" alt="Before resizing the browser window: a nicely spaced grid of images">

<img src="https://i.stack.imgur.com/bXuh6.jpg" alt="During resizing: overlapping!">

<img src="https://i.stack.imgur.com/w2Gxe.jpg" alt="After resizing: back to the nice grid.">


For Isotope version 3 use:

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

to avoid overlapping grid items.


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.


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


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.

人吐槽 人点赞



用户名: 密码:
验证码: 匿名发表


查看评论:jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize