[英]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. 我正在将Jquery Masonry与imagesLoaded js一起使用,但仍然无法正常工作。 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.
如果我将CSS中的宽度和高度设置为像素大小,则可以正常工作,但是如果我将高度更改为自动,则会失败,并且所有图像都将加载相同的高度。
This is the javascript I'm using to initialise (I have tried many variations of this!) 这是我用来初始化的javascript(我已经尝试了许多变体!)
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 这是CSS
img {display:block; height:auto; width:390px;}
I've been hacking around with this for days now, somebody must know the answer! 我已经忙了好几天了,有人必须知道答案!
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. 为此,我使用了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);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.