如何解决与角+砌体砖重叠？ [英] How to fix overlapping bricks with Angular + Masonry?

问题描述

我使用帕西的角砌筑指令的呈现在我的应用程序平铺元素。不像很多的砖石例子，我的砖不包括图像，只是静态文本和版面内容通过自定义指令渲染。我的设置是这样的：

I'm using passy's angular-masonry directives to render tiled elements in my app. Unlike a lot of the masonry examples, my bricks don't include images, just static text and layout content rendered through a custom directive. My setup looks like:

<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 is my directive that renders something like:

<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，我有一个定义的宽度和高度对于进入砖的元素，所以这（加的事实，我明确设置砖石列宽度）应该让砌筑知道我所有的砖块有多大。

In my CSS, I have a defined width and height for the elements that go into the bricks, so that (plus the fact that I'm explicitly setting masonry column-width) should let masonry know how big all my bricks are.

一切只是在页面加载所有砖块呈现堆叠在彼此的顶部在一个大的桩上的左边缘，因为如果布局例程没有触发正常工作有时（随机？）。如果手动调整窗口的大小，捕捉一切正常，保持这种方式。这似乎是一些人遇到了一个问题： https://github.com/帕西/角砌筑/问题/ 82

Everything works fine except that sometimes (randomly?) on pageload all the bricks are rendered stacked on top of one another in a big pile on the left edge, as if the layout routine didn't trigger. If the window is manually resized, everything snaps to normal and stays that way. This seems to be a problem that some others have run into: https://github.com/passy/angular-masonry/issues/82

我试过 preserve阶的所有组合和加载图像=FALSE等。我想我需要手动触发重载/重新布局，但据我所知与帕西指令，你不能的直接调用砌筑方法。

I've tried all the combinations of preserve-order and load-images="false" and so on. I think I need to manually trigger a reload/relayout, but as far as I know with the passy directive, you can't directly call masonry methods.

推荐答案

我一直运行到与帕西的指令的问题。也许这是因为我的砖被加载或我的风格的数目，但我一直得到了不少零星的重叠，砖延迟重装等等。

I kept running into issues with Passy's directive. Perhaps it was due to the number of bricks I was loading or my styling but I kept getting a lot of sporadic overlaps, delayed reloading of bricks and so on.

我切换到klederson的 角砖混指令 并已与该决定非常高兴。我没有基准确定，但它似乎已经加快加载时间。

I switched to klederson's angular-masonry-directive and have been extremely happy with the decision. I haven't benchmarked to confirm but it seemed to have sped up load times.

有关AngularJS一个非常简单和100％兼容的砖石指令......你知道怎么用砖石？好！你知道如何使用这个。

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.

这指令是为原料砌筑lib和没有jQuery的之一。

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

这篇关于如何解决与角+砌体砖重叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！