Isotope Elements Overlap How to Solve

How to Stop Overlapping Elements with isotope JS

Tweet
Share
Share
Pin

I was struggling to get isotope elements to stop overlapping and I found something that showed me a couple of ways to fix it. The way I fixed it was by waiting for the whole script to load and then running isotope. The problem is that when it is loading the script the images on the isotope element might not be loaded already so you need to wait for that. 

  1. Start isotope after the images have loaded.. $(window).load(function(){/*init plugin here*/})
  2. Use the imagesLoaded plugin: http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin
  3. call reLayout once the images are loaded $(window).load(function(){$('#thumbs').isotope('reLayout');});
  4. if the li elements are fixed size, then give them dimensions through CSS, and isotope will pick them up..