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?

回答1:

For Isotope version 3 use:

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

to avoid overlapping grid items.

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/15554798/jquery-masonry-isotope-and-fluid-images-momentary-overlap-on-window-resize