javascript - How to fix overlapping bricks with Angular + Masonry? - Stack Overflow

admin管理员组

文章数量:1319018

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>{{eventputed.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">{{eventputed.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>

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.

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:

I've tried all the binations 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'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.puted.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.puted.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>

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.

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./passy/angular-masonry/issues/82

I've tried all the binations 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.

• javascript
• jquery
• angularjs

Share Improve this question Follow asked Jan 15, 2015 at 16:08 Nate BarbettiniNate Barbettini 53.7k2828 gold badges136136 silver badges152152 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.

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.

angular-masonry-directive

A very simple and 100% patible 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.

For anyone running into a similar problem, I figured it out with some help from these answers. As a bonus, this helps me with refreshing after using Angular filters to modify which bricks are shown (the second linked answer deals with this).

Here's my working code, which I trigger when my async data has loaded on pageload, and also anytime the data is filtered or resorted:

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

Without $timeout, it looks (to my poorly-trained eyes) like the reload message is being consumed before the digest cycle pletes, so the filtering or sorting may not have already taken place. I'm not sure that this is the best solution, but it seems to work in my testing so far. If anyone has a better one, I'd love to see it.

Tried 3 framework and only this one works : https://github./s-yadav/angulargrid

No 3rd party lib required !! and smootly with twitter bootstrap. Hope it may help someone in the future

Note on others :

• https://github./passy/angular-masonry -> work quite smooth on dev but failed on PROD.

• https://github./klederson/angular-masonry-directive -> works but all the bricks are invisible !!?

本文标签： javascriptHow to fix overlapping bricks with AngularMasonryStack Overflow