0

我已将 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 上方，因此它没有按预期初始化？

4

1 回答 1

1

我进行了更多测试并确定打包代码按预期工作 - 如果我单击 a 我会看到附加的新类意味着打包工作按预期工作。

我仔细查看了我的 HTML，我的问题是我在“容器-窄”中定义了，因此打包程序不会扩展到填充空白区域。

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

于 2013-12-08T22:07:16.463 回答