JSFiddle - React, Tailwind, and code Playground

by Beardy

HTML

<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="AppController"> 
        <div class="wrapper">
            <div ng-repeat="item in items" class="item {{item.color}}" danny-packery>
                {{item.color}}
            </div>
        </div>
    </div>
</div>

CSS

.wrapper{
    width: 100%;
}

.grey{
    background-color: grey;
}

.pink{
    background-color: pink;
}

.item{
    margin-bottom: 10px;
    margin-top: 10px;
    width: 25%;
    height: 100px;
}

JavaScript

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

function AppController($scope) {
    $scope.items = [
        {
            color: 'pink'
        },
        {
            color: 'grey'
        },
        {
            color: 'pink'
        },
        {
            color: 'grey'
        },
        {
            color: 'pink'
        },
        {
            color: 'grey'
        },
        {
            color: 'pink'
        },
        {
            color: 'grey'
        }
    ];
}

myApp.directive('dannyPackery', ['$rootScope', function($rootScope) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			if($rootScope.packery === undefined || $rootScope.packery === null){
				console.log('making packery!');
				$rootScope.packery = new Packery(element[0].parentElement, {columnWidth: '.item'});
				$rootScope.packery.bindResize();
				$rootScope.packery.appended(element[0]);
				$rootScope.packery.items.splice(1,1); // hack to fix a bug where the first element was added twice in two different positions
			}
			else{
				$rootScope.packery.appended(element[0]);
			}
			$rootScope.packery.layout();
		}
	};
    
}]);