Packery 및 imagesLoaded 플러그인이 작동하지 않습니까?

Question

저는 웹 사이트에서 Packery를 사용 중이며 imagesLoaded를 다운로드했지만 페이지로드시에도 이미지가 겹칩니다. 웹 사이트는 here를 볼 수 있습니다 내 코드는 다음과 같습니다 :

$(document).ready(function() { 
var $container = $container.packery({ 
    itemSelector: "packery-item" 
}); 
$container.imagesLoaded(function() { 
    container.packery(); 
}); 
}); 

어떤 도움을 주시면 감사하겠습니다.

편집 : HTML 코드는 다음과 같습니다

<div class="packery js-packery"> 

<div class="packery-item item"><img src="imgs/cdg5.jpg"></img></div> 
<div class="packery-item text"><img src="imgs/text1.png"></img></div> 
<div class="packery-item item w2"><img src="imgs/cdg3.jpg"></img></div> 
<div class="packery-item gif"><img src="imgs/gif1.gif"></img></div> 

</div> 

등

Answer 1

문제는 항목에서 이미지를로드하기 전에 packery이 실행된다. 그 때문에 Packery는 요소가 얼마나 높아야하는지 알 수 없습니다.

모든 솔루션이로드되고 나서 Packery를 실행하면 jquery로 확인하십시오. 나는 이것을 할 여러 가지 방법을 발견했다. 해결책 here은 좋은 것으로 보인다.

이 문제를 해결하는 또 다른 방법은 CSS 또는 높이 속성으로 이미지의 높이를 고정하는 것입니다. 그러나 이미지 높이가 같거나 높이를 미리 알고있을 때만이 작업을 수행 할 수 있습니다.

업데이트 : 이것은 최초의 솔루션에 대한 예제 코드입니다 :

$(document).ready(function(){ 

    var cnt = $("img").length; 
    $("img").one("load", function() { 
     cnt--; 

     // If all images are loaded, init Packery 
     if (cnt === 0) 
     { 
      $(".js-packery").packery({ 
       itemSelector: "packery-item" 
      }); 
     } 

    }).each(function() { 
     if(this.complete) $(this).load(); 
    }); 

});