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

【问题标题】：How to fix overlapping bricks with Angular + Masonry?如何使用 Angular + Masonry 修复重叠的砖块？
【发布时间】：2015-01-15 16:08:17
【问题描述】：

我正在使用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 的事实）应该让砌体知道所有的大小我的砖是。

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

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

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

我一直遇到帕西指令的问题。也许是因为我加载的积木数量或我的造型，但我不断得到很多零星的重叠，延迟重新加载积木等等。

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

angular-masonry-directive

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

该指令适用于原始砌体库，而不是 jQuery 库。

【讨论】：

我遇到了同样的问题！这不仅解决了问题，而且速度更快！非常感谢！
感谢推荐！我通过凉亭获得了库，它对 imageloaded 有另一个依赖项。像魅力一样工作！

【解决方案2】：

对于遇到类似问题的任何人，我在these answers 的帮助下解决了这个问题。作为奖励，这有助于我在使用 Angular 过滤器修改显示的砖块后刷新（第二个链接的答案涉及此问题）。

这是我的工作代码，当我的异步数据加载到页面加载时触发，以及数据被过滤或重新利用时触发：

function refresh() {
    // We need to give Masonry a little jump-start, otherwise the bricks
    // will render in one big overlapped stack sometimes
    common.$timeout(function () { $scope.$broadcast('masonry.reload'); }, 100);
}

如果没有$timeout，它看起来（在我训练有素的眼中）就像在摘要周期完成之前消耗了重新加载消息，因此可能还没有进行过滤或排序。我不确定这是最好的解决方案，但到目前为止它似乎在我的测试中有效。如果有人有更好的，我很想看看。

【讨论】：

【解决方案3】：

尝试了 3 个框架，只有这个有效： https://github.com/s-yadav/angulargrid

不需要第 3 方库！！并使用 twitter bootstrap 顺利进行。希望它可以帮助将来的人

其他注意事项：

https://github.com/passy/angular-masonry -> 在 dev 上工作相当顺利，但在 PROD 上却失败了。
https://github.com/klederson/angular-masonry-directive -> 有效，但所有的砖块都看不见！！？

【讨论】：