JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.0/angular-resource.js"></script>
<div masonry>
  <div class="masonry-sizer"></div>
  <div class="masonry-item"></div>
  <div class="masonry-item"></div>
  <div class="masonry-item"></div>
  <div class="masonry-item"></div>
  <div class="masonry-item"></div>
  <div class="masonry-item"></div>
  <div class="masonry-item"></div>
  <div class="masonry-item"></div>
  <div class="masonry-item"></div>
</div>

CSS

.masonry {
  background: #EEE;
  max-width: 1200px;
}

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

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

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

.masonry-item {
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  box-sizing: border-box;
}

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

JavaScript

console.clear();

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

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

function MainController(flickrPhotos) {
	this.photos = flickrPhotos.load({tags: 'girls'});
}

function masonryDirective() {

  function postLink($scope, $element, $attrs) {
    $element
      .addClass('masonry')
      .masonry({
        itemSelector: '.masonry-item',
        columnWidth: '.masonry-sizer',
        percentPosition: true
      });
  }

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

function masonryItemDirective() {

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

	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'
      }
    }
  );
});