javascript - 如何用 Angular + Masonry 修复重叠的砖 block ？

Question

我正在使用 passy's angular-masonry directives在我的应用程序中呈现平铺元素。与许多砌体示例不同，我的积木不包含图像，仅包含静态文本和通过自定义指令呈现的布局内容。我的设置如下:

<div data-masonry
     data-column-width="250"
     data-load-images="false"
     data-preserve-order
     data-reload-on-show
     data-masonry-options="{ gutter: 15, isFitWidth: true, transitionDuration: 0 }">

     <div class="masonry-brick"
          data-ng-repeat="event in vm.events | orderBy: 'startTime.toDate()' | filter: (vm.showOnlyRegistered && { going: true })">

          <div data-event-item="event"></div>

     </div>
</div>

data-event-item 是我的指令，它呈现如下内容:

<div class="panel panel-default panel-thin light-shadow bgcolor-override event-item-card">
<div class="panel-body" data-ng-class="{'bg-success': event.going}">
    <div>
        <p class="text-medium text-thin">{{event.name}}</p>
    </div>

    <p>
        <strong>{{event.computed.locationName}}</strong><br />
        <span data-ng-if="!event.virtual">{{event.city}}, {{event.state}} {{event.zipCode}}</span>
    </p>
    <span class="center-block">
        <span data-discover-pill data-type="default">
            <span class="text-thin">{{event.computed.registrationLabel}}</span>
        </span>
    </span>

    <button type="button" 
            class="btn push-to-bottom bottom-center"
            data-ng-class="{'btn-default': !event.going, 'btn-success': event.going}"
            data-ng-click="toggleGoing(event.id)">
        I'm Going <i class="fa fa-check"></i>
    </button>
</div>

在我的 CSS 中，我为进入积木的元素定义了 width 和 height，因此(加上我明确设置 masonry column-width) 应该让砌体知道我所有的砖 block 有多大。

一切正常，除了有时(随机？)在页面加载时，所有积木都呈现为在左侧边缘一大堆堆叠在一起，就好像布局例程没有触发一样。如果手动调整窗口大小，一切都会恢复正常并保持原样。这似乎是其他一些人遇到的问题:https://github.com/passy/angular-masonry/issues/82

我已经尝试了 preserve-order 和 load-images="false" 等所有组合。我想我需要手动触发重新加载/重新布局，但据我所知，使用 passy 指令，你不能 directly call砌体方法。

Answer 1

我一直在使用 Passy 的指令时遇到问题。可能是因为我加载的积木数量或我的样式，但我不断收到很多零星的重叠，延迟重新加载积木等等。

我切换到 klederson 的 angular-masonry-directive并且对这个决定非常满意。我没有进行基准测试来确认，但它似乎加快了加载时间。

angular-masonry-directive

A very simple and 100% compatible masonry directive for AngularJS ... do you know how to use masonry? Good! You know how to use this.

This directive is meant for the raw masonry lib and not the jQuery one.