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/[email protected]/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
<div masonry="masonryOptions">
  <div class="masonry-sizer"></div>
  <div class="masonry-item" ng-repeat="item in photos.items">
    <img ng-src="{{ item.media.m }}" />
    Picture
  </div>
</div>

CSS

.masonry {
  background: #EEE;
}

/* clearfix */
.masonry:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.masonry-sizer,
.masonry-item {
  width: 20%;
}

.masonry-item {
  float: left;
  background: #D26;
  border-color: hsla(0, 0%, 0%, 0.5);
  box-sizing: border-box;
}

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


img {
  width: 100%;
  display: block;
}

JavaScript

console.clear();

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

App.controller('Main', MainController);
App.directive({
  'masonry': masonryDirective,
  'masonryItem': masonryItemDirective
});

function MainController($scope, flickrPhotos) {
	$scope.photos = flickrPhotos.load({tags: 'girls'});
  $scope.masonryOptions = {
    itemSelector: '.masonry-item',
    columnWidth: '.masonry-sizer',
    percentPosition: true
  };
}

function masonryDirective($parse) {

  function postLink($scope, $element, $attrs) {
    $element
      .addClass('masonry')
      .masonry($parse($attrs.masonry)($scope));
  }

  return {
    restrict: 'A',
    link: postLink
  }
}

function masonryItemDirective() {

	function postLink($scope, $element, $attrs) {
  	var $masonry = $element.parent();
    
    $element.imagesLoaded(function () {
      $masonry
        .masonry('appended', $element)
        .masonry();
    });
  }

	return {
  	restrict: 'C',
    link: postLink
  }
}









App.factory('flickrPhotos', function ($resource, $http) {

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