jquery Isotope option for auto height on element

Question

So I'm using the isotope masonrylayout

$('section').isotope({itemSelector:'article',layoutMode:'masonry',transformsEnabled: false, animationEngine: 'jquery',masonry:{columnWidth:8}});

The problem is that if I don't set the height for the article in css, the layout doesn't look good the items overlap and stuff, but I can't set a fixed height for the elements, since they are blog posts and can change in size, do you guys have any tips on how to solve this?

score 26 · Accepted Answer · answered Apr 15 '12 at 16:27

26

Problem solved, you need to call $(window).load instead of $(document).ready(

answered Apr 15 '12 at 16:27

Uffo

8,424
20
78
148

Works for me too, using defaul layout tho. Interestingly enough the default isotope example uses `$(document ).ready()`.. [Codepen link](http://codepen.io/desandro/pen/nFrte) – Cammy Jan 27 '16 at 10:16
While window load may work, I do not recommend it. window load waits for ALL assets on the page to load (CSS, JS, img, iframe, etc). imagesLoaded is better suited as you can target only the images within the Isotope instance to load. – desandro Mar 25 '16 at 18:31

desandro · Answer 2 · 2016-03-25T18:29:32.503

8

var $container = $('#container').imagesLoaded( function() {
  $container.isotope({
    // options
  });
});

See Isotope - imagesLoaded

edited Mar 25 '16 at 18:29

answered Apr 16 '12 at 13:34

desandro

2,836
1
20
29

You are right. Above page returns 404 not found now. – Haris Aug 28 '14 at 07:52
This should be the accepted answer, its from the author after all – Blowsie Jun 28 '16 at 13:46

score 0 · Answer 3 · answered Feb 14 '15 at 14:53

This happend because isotope doen't know your image sizes before load. The better way to do it is using a loading indicator (maybe with imageLoaded plugin) to load the images and then perform an Insert or append with isotope. You will have a smooth navigation and the ilusion of a faster loading site than using $(window).load().

jquery Isotope option for auto height on element

3 Answers3