JSFiddle - React, Tailwind, and code Playground

by rajaraodv

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<div ng:app="test">
 <div ng-controller="Ctrl2">
     <div id="container"><div my-directive check-last ng-repeat="res in styleClasses" class={{res.style}}>{{res.style}}</div></div>
 </div>
</div>
<span style="color: red" id="output">Out</span>

CSS

#container {
    border: 2px solid;
    padding: 5px;
}

.item {
    float: left;
    background: #49F;
    margin: 5px;
}

.w1 { width: 50px; }
.h1 { height: 50px; }
.w2 { width: 110px; }
.h2 { height: 110px; }

JavaScript

function Ctrl2($scope) {
        $scope.styleClasses= [
        {style: 'item w1 h1'},
        {style: 'item w1 h2'},
        {style: 'item w2 h1'},
        {style: 'item w1 h2'},
        {style: 'item w1 h1'},
        {style: 'item w1 h1'},
        {style: 'item w2 h2'},
        {style: 'item w1 h1'},
        {style: 'item w1 h1'},
        {style: 'item w2 h1'},
        {style: 'item w1 h2'},
        {style: 'item w1 h1'},
        {style: 'item w2 h1'},
        {style: 'item w1 h2'}
  ];
}
angular.module('test', [])
.directive("myDirective", function() {
    return {
        restrict: 'E'
    };
})
.directive('checkLast', function () {
        return function (scope, element, attrs) {
            
            if (scope.$last=== true) { //wait for last item in the iterator
                element.ready(function () {
                   $('#container').masonry({ columnWidth: 60});
                    
                })
            }
        }
    });