Masonry layout break if you use infinite-scroll and ng-filter with ordering

[gopandago]

Hi Guys,

Not sure if you have faced this issue or not, when you use angular infinite-scroll and your ng-repeat contains ordering, the Masonry layout breaks

The angular script

studentApp.controller('studentCtrl', function($scope) {

    $scope.students = [
        {studentId: 1, username: "user1",
            dob: "10/01/1970",
            address: { suburb: "Melbourne", state: "vic", postcode: "3000"}},
        {studentId: 2, username: "user2", 
            dob: "10/01/1980",
            address: { suburb: "Melbourne", state: "vic", postcode: "3000"}},
        {studentId: 3, username: "user3",
            dob: "11/01/1980",
            address: { suburb: "Melbourne", state: "vic", postcode: "3000"}},
        {studentId: 4, username: "user4",
            dob: "12/02/1980",
            address: { suburb: "Melbourne", state: "vic", postcode: "3000"}}];

    $scope.loadMore = function() {
        var last = $scope.students[$scope.students.length - 1].studentId;

        for(var i = 1; i < 2; i++) {
            $scope.students.push({
                studentId: last + i, username: "user5",
                dob: "12/02/1980",
                address: { suburb: "Melbourne", state: "vic", postcode: "3000"}});
        }
    };
});

css

.masonry-brick {
    margin: 5px;
    float:left;
    padding:10px;
}

.masonry-brick.loaded {
    display: block;
    border:1px solid;
    border-radius:5px;
    white-space: nowrap;
}

This is my sample html

<div ng-controller="studentCtrl">
Order By:
        <a href="" ng-click="order = 'dob'">DOB</a>

        <div masonry>
            <div infinite-scroll="loadMore()" infinite-scroll-distance='2' infinite-scroll-disabled='false' infinite-scroll-immediate-check='false'>
                <div class="masonry masonry-brick" ng-repeat="student in students | orderBy: order">
                    studentId {{student.studentId}} - {{student.username}}
                    <br>DOB: {{student.dob}}
                    <br>Location: {{student.location.suburb}}, {{student.location.state}}
                </div>
            </div>
        </div>
</div>

If you change the ng-repeat without the ordering like this then it'll work

<div class="masonry masonry-brick" ng-repeat="student in students">
        studentId {{student.studentId}} - {{student.username}}
    <br>DOB: {{student.dob}}
        <br>Location: {{student.location.suburb}}, {{student.location.state}}
</div> 

I have tried to isolate the issue but it seems the reload fails after the infinite scroll is activated? Has anyone experienced this issue?

[hirbod]

@sipanda84 could you fix this problem? I did not start using this plugin but I like to switch to masonry from angular-deckgrid - but I will also use infinite-scroll and orderBy. When you have a small update on this, I really appreciate!

[hirbod]

Now I'm here where you are. I have exact same issue. Seems like it breaks also track by obj.id and it has some "gaps" between when new elements are put inside

[Tudes]

I have an array of 1000 objects. I use limitTo to display the first 30 items and then on scroll I would like to display the next 30 and so on. How would I approach that.

[cauli]

+1.

I fixed (only a workaround) this problem on my project by increasing the timeout on this.scheduleMasonry from 30ms to 100ms.

Line 44.

Change this:

this.scheduleMasonry = function scheduleMasonry() {
  if (timeout) {
    $timeout.cancel(timeout);
  }
  schedule.push([].slice.call(arguments));
  timeout = $timeout(function runMasonry() {
    if (destroyed) {
      return;
    }
    schedule.forEach(function scheduleForEach(args) {
      $element.masonry.apply($element, args);
    });
    schedule = [];
  }, 30);
};

to this:

this.scheduleMasonry = function scheduleMasonry() {
  if (timeout) {
    $timeout.cancel(timeout);
  }
  schedule.push([].slice.call(arguments));
  timeout = $timeout(function runMasonry() {
    if (destroyed) {
      return;
    }
    schedule.forEach(function scheduleForEach(args) {
      $element.masonry.apply($element, args);
    });
    schedule = [];
  }, 100);
};

[gustafguner]

The first thing I did to solve this was that I removed my angular-filter, and instead implemented the filter-function back-end. Secondly, I noticed that the loaded masonry-bricks had the class .loaded. I therefore set a simple css rule to hide the .masonry-brick by default, and then when the class .loaded was applied I put display:block;.

[creativeinflux]

I know this is an old issue but I just ran into this using a filter. You can get around it by broadcasting a masonry.reload event:

$scope.$broadcast('masonry.reload');

This event refreshes the layout and puts everything back into the correct position. I'm not using infinite scroll but I'm sure you can fire the event within your loadmore() function to refresh the layout when the items have loaded.

For my filter I added a filterChange function which included the event broadcast and triggered it using ng-change, I also had to wrap the broadcast in a timeout to make sure the animations had ended before the reload event was fired.

I hope this helps anyone else that stumbles across this issue.

[kapilgorve]

I had some static elements with the image,so bricks were overlapping at the initialization. So I added a min height to the brick,so bricks will init with min-height and then reload after image is loaded.