html - 如何将 Masonry 与 AngularJS 模板一起使用？

Question

你好，我想在 AngularJS 中使用砌体。我想在容器中从左到右调整div。根据他们的文档，我们可以简单地使用它

<div class="js-masonry" data-masonry-options='{ "itemSelector": ".item", "columnWidth": 200 }'>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

我在 Angular 中用过这个，比如

<div class="js-masonry" data-masonry-options='{ "itemSelector": "#masonry", "columnWidth": 200 }'>
     <div id="masonry" class="ng-scope" ng-repeat="comment in comments.data" style="position: absolute; left: 0px; top: 0px;">
     <div id="masonry" class="ng-scope" ng-repeat="comment in comments.data" style="position: absolute; left: 0px; top: 0px;">
     <div id="masonry" class="ng-scope" ng-repeat="comment in comments.data" style="position: absolute; left: 0px; top: 0px;">
</div>

我希望这些 div 从左到右自动调整(类似于同位素的砌体效果)。第一次使用这个。任何帮助将不胜感激。

Answer 1

有一个为此制作的包装器:

https://github.com/passy/angular-masonry

如何使用它的快速示例:

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