CODEWITHSUNDEEP
javascriptjqueryjquery-masonry
The Sumo
The Sumo

Reputation: 637

jquery masonry image height auto doesn't work, even with imagesLoaded

I know there are lots of answers to this on here, but none of them are working for me.

I'm trying to load images with a fixed width, but the images have varying heights.

I'm using the Jquery Masonry with imagesLoaded js but I still can't get it to work. If I set the width and height in css to a pixel size it works fine, but if I change height to auto it fails and all the images load the same height.

This is the javascript I'm using to initialise (I have tried many variations of this!)

var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container, {
// options
columnWidth: 390,
itemSelector: '.item'
} );
});

And this is the css

img {display:block; height:auto; width:390px;}

I've been hacking around with this for days now, somebody must know the answer!

Upvotes: 1

Views: 1279

Answers (1)

RayR75
RayR75

Reputation: 11

Hopefully this will help a few people in the future.

The only thing I could get up with was to wait until the page was fully loaded for those heights to set and THEN grab those heights afterwards.

For this I used window.load. Maybe there is a better way but this worked for me.

$(window).load(function(){

 $('.someDiv').each(function () {

  var $this = $(this);
    var someDivHeight = $this.height();

    console.log(someDivHeight);

  });
});

Upvotes: 1

Related Questions