Last Updated: September 21, 2016
·
6.777K
· tonyrain

Simple angular and masonry directive without overlapping

Today I face the problem of overlapped blocks after ng-repeat directive. Here the code that leads to overlapping.

<div class="main__results--instagram" ng-show="showInstagram">
 <div ng-repeat="searchResult in searchResults.instagram" class="item item--instagram--{{ searchResult.imageType }}" ng-gate8-masonry>
  <img ng-src="{{ searchResult.image }}">
 </div>
</div>

A simple solution that came to me was to write my own directive (ng-gate8-masonry).

This directive is pretty easy:

(function() {
    "use strict";

    angular.module('masonry', ['ng']).directive('ngGate8Masonry', function($timeout) {
        return function(scope, element, attrs) {

            if (scope.$last){
                $timeout(function () {
                    var parent = element.parent();
                    var masonry = new Masonry(parent[0], {
                        itemSelector: '.item',
                        isAnimated: true,
                        animationOptions: {
                            duration: 750,
                            easing: 'linear',
                            queue: false
                        },
                        transitionDuration : "0.4s",
                        isResizable: false
                    });
                });
            }
        };
    })
})();

After finding the last element in ng-repeat loop ngGate8Masonry inits element parent container with masonry.
$timeout helps us to overcome the effect of overlapping.

P.S.

TODO directory params for Masonry object init.

5 Responses
Add your response

I hadn't heard of masonry until this so thank you!

over 1 year ago ·

Is this published on Bower or Github?

over 1 year ago ·

Not yet. I`m going to make some additional params for masonry config and then publish it. But now, you can see it in work here:

https://github.com/gate8team/socialMood

It`s my simple sails js social tag searcher. I use ngGate8Masonry directive in this project.
Thank for your interest in my work.

over 1 year ago ·

Thanks!
This script have changed my work day :)

over 1 year ago ·

This is brilliant !! thanks a lot !!

over 1 year ago ·