Masonry with AngularJS

Question

I am developing an \"art gallery\" app.

Feel free to pull down the source on github and play around with it.

Plunker with full

Answer 1

I believe that I have had exactly the same problem:

Many images in a ng-repeat loop, and want to apply masonry/isotope to them when they are loaded and ready.

The issue is that even after imagesLoaded is called back there is a period of time when the images are not 'complete', and so can not be measured and layed out properly.

I have come up with the following solution that works for me and only requires one layout pass. It occurs in three stages

1. Wait for images to load (when the last one is added from the loop - uses the jQuery images loaded plugin).
2. Wait for all images to 'complete'
3. Layout the images.

---

angularApp.directive('checkLast', function () {
    return {
        restrict: 'A',
        compile: function (element, attributes) {
            return function postLink(scope, element) {
                if (scope.$last === true) {
                    $('#imagesHolder').imagesLoaded(function () {
                        waitForRender();
                    });
                }
            }
        }
    }
});

function waitForRender() {
    //
    // We have to wait for every image to be ready before we can lay them out
    //
    var ready = true;
    var images = $('#imagesHolder').find('img');
    $.each(images,function(index,img) {
        if ( !img.complete ) {
            setTimeout(waitForRender);
            ready = false;
            return false;
        }
    });
    if (ready) {
        layoutImages();
    }
}

function layoutImages() {
    $('#imagesHolder').isotope({
        itemSelector: '.imageHolder',
        layoutMode: 'fitRows'
    });
}

This works with layout like this

I hope this helps.