2015-01-31 3 views
0

여기에 대한 답변이 많이 있지만 그 중 누구도 저를 위해 일하지 않습니다.jquery masonry 이미지 높이 auto가 작동하지 않습니다. imagesLoaded

고정 너비로 ​​이미지를로드하려고하는데 이미지의 높이가 다양합니다.

imagesLoaded js와 함께 Jquery Masonry를 사용하고 있지만 여전히 작동하지 않습니다. CSS의 너비와 높이를 픽셀 크기로 설정하면 잘 작동하지만 높이를 자동으로 변경하면 이미지가 모두 실패하고 모든 이미지의 높이가 같아집니다.

내가 초기화하기 위해 사용하고 자바 스크립트 (I이 많은 변화를 시도했다!)

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' 
}); 
}); 

입니다 그리고 이것은 내가 주변에 해킹했던 CSS를

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

입니다 이제 며칠 동안 누군가가 대답을 알아야합니다!

+0

'img {height : 100 %; 너비 : 390px;} '? – Macsupport

+0

예, 모든 CSS 대안을 시도했습니다. 결국 잘못된 순서로 호출 자바 스크립트로 밝혀졌다. ImagesLoaded js는 실제로 jason 이후에로드되었습니다. 고마워, 고마워. –

답변

0

앞으로 도움이 될 수 있기를 바랍니다.

나는 일어날 수있는 유일한 일은 페이지 높이가 설정 될 때까지 기다렸다가 나중에 그 높이를 잡을 때까지 기다리는 것이 었습니다.

이 때문에 window.load를 사용했습니다. 아마 더 좋은 방법이 있지만 이것은 나를 위해 일했습니다.

$(window).load(function(){ 

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

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

    console.log(someDivHeight); 

    }); 
});