为什么我的包装代码不执行？

Question

我已经在我的开发站点中添加了packery，以便使用新的布局——它工作得很好，所以我已经将相同的代码推广到了生产中。出于某种原因，它不会通过我的prod实例执行。当我运行预编译时，我最初认为这是一个代码排序问题。

这是我的开发实例，显示了工作代码。这是我的prod实例，其中的代码似乎没有初始化。

这是我的CSS：

/* 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 );
    }
  });

我目前还没有使用点击功能，但计划在未来使用，所以它仍然存在于代码中。

还有我的html:

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

部分：

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

可能是因为当我的预编译运行时，我的jquery被插入到packery.js之上，所以它没有按预期初始化吗？

Answer 1

我运行了更多的测试，并确定packery代码按预期工作-如果我点击，我会看到附加的新类，这意味着packery按预期工作。

我仔细查看了我的HTML，我的问题是我在"容器狭窄"中定义了，因此packery不会扩展以填充空白。

删除了"容器狭窄"的限制-问题解决了！