JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/isotope/1.5.21/jquery.isotope.min.js"></script>
<script src="http://cdn.jsdelivr.net/angularjs/1.0.2/angular.min.js"></script>
<section ng-controller="ItemsCtrl" isotope>
    <article ng-repeat="item in items">
        <h2 id="{{item.id}}">{{item.title}}</h2>
    </article>
</section>

CSS

body { padding: 8px 20%; }
section {
    margin: 0 auto; padding: 8px 0 0 8px; 
    border: 1px solid #ddd; }
section article { 
    margin: 0 8px 8px 0; padding: 4px; 
    border: 1px solid #ddd; }

JavaScript

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

isotopeApp.directive('isotope', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
            $timeout(function(){
            element.isotope({ 
                itemSelector: 'article',
                layoutMode: 'fitRows',
                getSortData : {
                    title: function(e) {
                        return e.find('h2').text();
                    }
                },
                sortBy: 'title',
                sortAscending: true
            });
            });
        }
    };
});

function ItemsCtrl($scope) {
    $scope.items = [
        {id: 1, title: 'one'},
        {id: 2, title: 'two'},
        {id: 3, title: 'three'}
    ];
}