JSFiddle - React, Tailwind, and code Playground

by namit101

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>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div ng:app="test">
 <div ng-controller="Ctrl2">
     <my-directive></my-directive>
 </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.isInit = false;            
        $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',
        replace: true,
        scope: true,
        template: '<div id="container"><div check-last ng-repeat="res in styleClasses" class={{res.style}}>{{res.style}}</div></div>'
    };
})
     .directive('checkLast', function () {
        return function (scope, element, attrs) {
            
            if(scope.isInit == false && scope.$last)
            {
                element.parent().isotope();
                scope.isInit = true;
            }
            if(scope.isInit)
            {
                element.parent().isotope('insert',element[0]          );
                element[0].isotope('reLayout');
            }
        }
    });