Masonry + AngularJS

by Felipe Alfaro

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<script src="http://code.angularjs.org/1.1.0/angular-resource.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div masonry="240" ng-controller="MasonryCtrl">
    <div class="masonry-grid-sizer"></div>
    <div class="masonry-item" ng-repeat="item in photos.items">
        <img ng-src="{{ item.media.m }}" />
    </div>
</div>

CSS

.masonry .masonry-item,
.masonry-grid-sizer {
  float: left;
 transition: 300ms;
 width: 20%;
 position: relative;
}

img {
 width: 100%;   
}

@media (max-width: 700px) {
  .masonry-grid-sizer,
  .masonry .masonry-item {
    width: 50%;
  }
}

JavaScript

var MyApp = angular.module('MyApp', ['ngResource']);

MyApp.factory('flickrPhotos', function ($resource) {
    return $resource('http://api.flickr.com/services/feeds/photos_public.gne', { format: 'json', jsoncallback: 'JSON_CALLBACK' }, { 'load': { 'method': 'JSONP' } });
});






MyApp.directive('masonry', function ($parse) {
    return {
        restrict: 'A',
        link: function ($scope, $element, attrs) {
        
        		$element.addClass('masonry');
            
            setTimeout(function () {
              $element.masonry({
              	columnWidth: '.masonry-grid-sizer',
                itemSelector: '.masonry-item',
                percentPosition: true
              });
            }, 4000);
            

           
        }
    };        
});

MyApp.directive('masonryItem', function () {

    return {
        restrict: 'C',
        link: function (scope, $element, attrs) {
           $element.html($compile($element.html())(scope));
           $element.imagesLoaded(function () {
               //$element.parents('.masonry').masonry('reloadItems');
           });
        }
    };
    
});









MyApp.controller('MasonryCtrl', function ($scope, flickrPhotos, $timeout) {
    $scope.photos = flickrPhotos.load({ tags: 'girls' });
    
    $timeout(function () {
    	//$scope.photos = flickrPhotos.load({ tags: 'tree' });
    }, 5000);
    
});