Masonry.js가 적용되지 않음

Question

내 사이트에서 Masonry.js jQuery 플러그인/효과를 테스트하고 사이트에서 간신히 기본 사항을 제외하고 데모 사이트의 모든 내용을 복사해도 작동하지 않음 . 이유를 이해할 수 없습니다.

메이슨 jQuery 플러그인은 아무런 효과 나로드를하지 않고있는 것처럼 보입니다. 그러나 페이지가 파일을 올바르게로드하고 코드를 액션으로 호출하는 코드는 정확하게 작동하는 데모 사이트의 코드와 동일합니다 . 테스트로서 나는이 예제 사이트에서 직접 연결하는 스타일 시트를 얻었고 모든 ID와 클래스 이름은 동일합니다.

라이브 : http://bit.ly/1k7RgDS

예 사이트 (이 사이트에 대한 작업 고급) : http://bit.ly/1kcCmJA

벽돌 jQuery를 사이트 : http://masonry.desandro.com/

HTML

<script src="//code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="<?php HTTP_HOST ?>/Scripts/masonry.pkgd.min.js"></script> 
    <script> 
     $(function(){ 

     var $container = $('#container'); 

     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : '.masonryImage' 
      }); 
     }); 

     }); 
    </script> 

<div id="container"> 
     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/200/food/1" alt=""> 
     </div> 

     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/150/food/10" alt=""> 
     </div> 

     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/250/food/3" alt=""> 
     </div> 
     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/200/food/1" alt=""> 
     </div> 

     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/150/food/10" alt=""> 
     </div> 

     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/250/food/3" alt=""> 
     </div> 
     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/200/food/1" alt=""> 
     </div> 

     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/150/food/10" alt=""> 
     </div> 

     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/250/food/3" alt=""> 
     </div> 
     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/200/food/1" alt=""> 
     </div> 

     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/150/food/10" alt=""> 
     </div> 

     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/250/food/3" alt=""> 
     </div> 
     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/200/food/1" alt=""> 
     </div> 

     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/150/food/10" alt=""> 
     </div> 

     <div class="masonryImage"> 
      <img src="http://lorempixum.com/200/250/food/3" alt=""> 
     </div>   
    </div> 

jQuery를 페이지 개방 불을 지르고가는

Answer 1

내가 볼 :

$container.imagesLoaded is not a function

imagesLoaded가 JQuery와 네이티브 것이 아닙니다 .. 당신은 아마 당신의 페이지 예제 사이트입니다

Answer 2

이 JQuery와 확장을 추가 할 필요가 다른 버전의 jQuery masonry 플러그인을 사용합니다.

masonry.js 웹 사이트에 제공된 구문을 사용하면 작동합니다.

올바른 구문 :

var $container = $('#container'); 
// initialize 
$container.masonry({ 
    itemSelector: '.masonryImage' 
}); 

Answer 3

난 당신이 벽돌의 최신 버전을 사용하고 있는지 추측하고있다.

http://imagesloaded.desandro.com/

: 당신이 참조하는 사이트는 imagesLoaded을 사용하려는 경우, 당신은 Desandro의 페이지에서 JS 파일을 포함해야하므로, 버전 3에 오는 Desandro는, imagesLoaded을 제거 Masonry (V2)의 이전 버전을 사용 원래 코드가 작동 할 경우

그러나 더 좋은 방법은 이것은 당신이/동적으로 새로운 이미지를로드에 대한 계획의 크기를 알 수없는 경우가 아니라면 과잉 아마

var $container = $('#container'); 
$container.masonry({ 
    itemSelector: '.masonryImage' 
}); 
$container.imagesLoaded(function() { 
    $container.masonry(); 
}); 

것 수행하는 방법 Masonry는 제대로 수행 할 이미지가 필요합니다. 그렇다면, 나는 그것을 포함하는 것으로 갈 것입니다.