32278

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.">

Answer1:

For Isotope version 3 use:

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

to avoid overlapping grid items.

Answer2:

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.

Answer3:

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.

Recommend

  • jQuery Isotope order by number sorts items incorrectly
  • Joining multiple checkbox filters within Isotope.js
  • Jquery Isotope plugin: Generating random sized images
  • jQuery isotope plugin horizontal scrolling
  • Regex to remove word from XSLT
  • Dynamic programming matrix chain multiplication
  • String not fitting in label which is in a subview for swift
  • How to delete a newline using \\b
  • How to start server for Selenium grid Java Maven setup
  • Allocating a 2D contiguous array within a function
  • Mapping two workspace folders to the same working directory
  • Load Same ACF Map Twice on Same Page
  • react split panel resize
  • Cypher - matching two different possible paths and return both
  • Dynamically load css stylesheet and wait for it to load
  • Validate jQuery plugin, field not required
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • WPF version of .ScaleControl?
  • Android Activity.onWindowFocusChanged doesn't get called from within TabHost
  • ListItem.Attributes.Add not working
  • how to avoid repetitive constructor in children
  • How to get Eclipse Oxygen to run on Java 9
  • Control modification in presentation layer
  • SSO with signing and signature validation doesn't work
  • Deserializing XML into class C#
  • VBA Convert delimiter text file to Excel
  • align graphs with different xlab
  • php design question - will a Helper help here?
  • How to include full .NET prerequisite for Wix Burn installer
  • AngularJs get employee from factory
  • Free memory of cv::Mat loaded using FileStorage API
  • Memory offsets in inline assembly
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Turn off referential integrity in Derby? is it possible?
  • costura.fody for a dll that references another dll
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • How to load view controller without button in storyboard?
  • How do I use LINQ to get all the Items that have a particular SubItem?