내 packery 코드가 실행되지 않는 이유는 무엇입니까?

Question

내 dev 사이트에 새로운 레이아웃으로 놀기 위해 packery를 추가했습니다. 작동이 좋아서 같은 코드를 생산에 적용했습니다. 웬일인지, 그것은 내 prod 인스턴스를 통해 실행되지 않습니다. 내 초기 생각은 사전 컴파일을 실행할 때 코드 순서 문제입니다.

Here is my dev instance은 작동 코드를 보여줍니다. Here is my prod instance 코드가 초기화되지 않은 것 같습니다.

/* Packery */ 

.item-content { 
    border-color: hsla(0, 0%, 100%, 0.4); 
    -webkit-transition: width 0.4s, height 0.4s; 
    -moz-transition: width 0.4s, height 0.4s; 
     -o-transition: width 0.4s, height 0.4s; 
      transition: width 0.4s, height 0.4s; 
} 

.item.is-expanded { 
    z-index: 2; 
} 

내 JQuery와 :이 코드에 남아 있도록

//Packery 

var $container = $('.packery').packery(); 

    $container.on('click', '.item', function(event) { 
    var $item = $(event.currentTarget); 
    var isExpanded = $item.hasClass('is-expanded'); 
    $item.toggleClass('is-expanded'); 
    if (isExpanded) { 
    // if shrinking, just layout 
    $container.packery(); 
    } else { 
     // if expanding, fit it 
     $container.packery('fit', event.currentTarget); 
    } 
    }); 

내가 현재 미래에 아직하지만 계획 클릭 기능을 사용하지 않는

여기 내 CSS입니다.

그리고 내 HTML : 부분

<div id="container" class="packery"> 
    <%= render partial: 'shared/show_projects', collection: @projects %> 
</div> 

: 내 사전 컴파일 내 JQuery와는 packery.js 위에 삽입되어 실행 그래서 그렇지 않은 경우

<div class="item capsule span6"> 
    <p> 
    <div class="row"> 
     <div class="span4"> 
      SNIP! 
     </div> 
    </div> 
    </p> 
</div> 

이 그렇게 될 수 있을까 의도 한대로 초기화합니까?

Answer 1

필자는 더 많은 테스트를하고 packery 코드가 의도 한대로 작동하고 있다고 판단했습니다. 클릭하면 새로운 클래스가 추가되어 packery가 의도 한대로 작동한다는 것을 알 수 있습니다.

필자는 HTML을 자세히 살펴 봤는데 문제는 필자가 "좁은 컨테이너"내에서 정의했기 때문에 공백을 채우기 위해 포장이 확장되지 않는다는 것입니다.

"컨테이너 폭이 좁은"제한이 제거되었습니다. - 문제가 해결되었습니다!