angular-masonry 指令仅在一列中显示图像答案

【问题标题】：angular-masonry directive showing images in only one columnangular-masonry 指令仅在一列中显示图像
【发布时间】：2015-02-11 13:05:48
【问题描述】：

尝试使用 passy (https://github.com/passy/angular-masonry) 的 angular-masonry 指令

它在一列中显示图像，而不是网格布局。任何帮助将不胜感激！

我的html

<div class="container">
  <div masonry>
    <div class="masonry-brick" ng-repeat="brick in bricks">
        <img ng-src="{{ brick.picUrl }}" alt="A masonry brick">
    </div>
  </div>
</div>

我的 CSS：

.masonry-brick { 
    width: 25%; 
    margin: 0.1em;
}

.masonry-brick img { 
    width:100%; 
}

现在，如果我在 .masonry-brick 类中包含 float: left 样式，那么它有点工作，但有很大的差距。此外，由于某种原因，我的砌体选项不起作用。如果我要添加 transitionDuration：

<div class="container">
  <div masonry="{ transitionDuration: '0.4s' }">
    <div class="masonry-brick" ng-repeat="brick in bricks">
      <img ng-src="{{ brick.picUrl }}" alt="A masonry brick">
    </div>
  </div>
</div>

它显示图像加载方式没有变化。但是，正确安装了 angular-masonry，并且正确包含并注入了所有文件。我在这方面没有任何错误。

感谢您的帮助！

【问题讨论】：

在加载 angularjs 之前加载 jquery。还要使用较新版本的砌体。
如果砌体根本不起作用，那么您也可以使用 angular-deckgrid 砌体指令。
我正在使用 .11 版的 angular-masonry 和 3.2 版的砌体。我相信它们是最新的。我的文件加载顺序正确。另一个奇怪的是，这里的演示，directiv.es/angular-masonry，似乎也停止了工作。还有其他想法吗？
我也会看看 angular-deckgrid
你在angular之前加载过jquery吗？

标签： javascript css angularjs masonry

【解决方案1】：

当我在砌体 div 块中或内部使用 ng-show 或 ng-hide 时，这发生在我身上。确保将reload-on-show 添加到使用 ng-show 或 ng-hide 的 div 标签中。

【讨论】：