如何用Angular + Masonry修复重叠的砖块？

Question

我正在使用passy的angular-masonry指令在我的应用程序中渲染平铺元素.与许多砌体示例不同,我的砖块不包含图像,只包含通过自定义指令呈现的静态文本和布局内容.我的设置如下:

<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)应该让砌筑知道我所有的砖块有多大.

一切正常,除了有时(随机？)在页面加载上,所有的砖块都在左边的一大堆上堆叠在一起,好像布局例程没有触发.如果手动调整窗口大小,一切都会恢复正常并保持这种状态.这似乎是一些其他人遇到的问题:https://github.com/passy/angular-masonry/issues/82

我试过的所有组合preserve-order和load-images="false"等.我想我需要手动触发重载/重传,但据我所知,使用passy指令,你不能直接调用 masonry方法.

Answer 1

我一直遇到Passy指令的问题.也许是因为我装的砖块数量或造型,但我不断得到很多零星的重叠,延迟重新装砖等等.

我切换到克莱德森的角度 - 砖石指令,对这个决定非常满意.我没有确定基准,但它似乎加快了加载时间.

角砌体指令

一个非常简单且100%兼容的AngularJS砌体指令......你知道如何使用砌体吗？好!你知道如何使用它.

该指令适用于原始的masonry lib而不是jQuery.