Wordpress 및 imagesLoaded와 jQuery 벽돌

Question

나는 일하고있는 WordPress의 테마에 jquery 벽돌을 사용하고 있습니다.

 <script type="text/javascript"> 
     jQuery(function() { 
      jQuery('#masonry-wrap').masonry({ 
      itemSelector: '.masonry-box', 
      columnWidth: 283 
      }); 
     }) 
     </script> 

그러나 크롬과 사파리에서 사이트를 확인 ... 나를 위해 잘 작동하는 것 같군 다음에 포함 된 요소의 바닥을 밀어 : 잠시 동안 작동하도록을 받고 고민 한 후 나는이 것을 발견 요소들 ...

어딘가에서, 이것은 imagesLoaded 플러그인과 여기에서 찾은 코드를 사용하여 해결할 수 있습니다 : http://masonry.desandro.com/demos/images.html - 그러나 jQuery에는 절대적으로 끔찍한 점이있어서 조금 어려움을 겪고 있습니다. 그것을 얻는 것.

누구든지 내가 이미 사용하고있는 코드에 통합 할 수 있습니까? (위의 코드는 작동합니까?)

도움을 주시면 대단히 감사하겠습니다. 줄리안

Answer 1

나는 이것이 당신을 위해 일해야한다고 생각합니다;

// Masonry Trigger 
var $container = jQuery('#masonry-wrap'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector: '.masonry-box', 
    columnWidth: 283 
    }); 
}) 

이 imagesLoaded의 최신 버전을 사용해야합니다, 나는 잠시 다시 문제가 있었고, 그 이유는 내 버전은 약간 유효 기간이었다.

편집 내가 AJAX를 통해 새로운 콘텐츠에로드 한과 레이아웃 작업 방법을 사용하고 때 난 단지 imagesLoaded를 사용했다

. 이미지가로드 된 후 $ window.load()에서 masonry를 실행하면 잘 실행되어야합니다.

(function($){ 

    $(window).load(function() { 

     // Masonry Trigger 
     var $container = $('#masonry-wrap'); 

     $container.masonry({ 
     // options 
     itemSelector: '.masonry-box', 
     columnWidth: 283 
     }); 

    }); 

})(jQuery);