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

Question

尝试使用passy的angular-masonry指令(https://github.com/passy/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 styling，那么它就可以工作了，但有很大的差距。另外，由于某些原因，我的砖石选项不起作用。如果我要添加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已正确安装，并且所有文件都已正确包含和注入。在这方面我没有得到任何错误。

谢谢你的帮忙!

Answer 1

当我在masonry div块中使用ng-show或ng-hide时，就会发生这种情况。确保将reload-on-show添加到使用ng-show或ng-hide的div标记中。