Question

尝试使用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>

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

感谢您的帮助！

Answer 1

当我在砌体div块中或内部使用ng-show或ng-hid e时，发生这种情况。确保将reload-on-show添加到使用ng-show或ng-hide的div标记。

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

1 个答案: