Isotope Groups

by Reusablecode

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
<div class="item people" data-type="people"></div>
<div class="item places" data-type="places"></div>
<div class="item things" data-type="things"></div>
<div class="item people" data-type="people"></div>
<div class="item places" data-type="places"></div>
<div class="item things" data-type="things"></div>
<div class="item people" data-type="people"></div>
<div class="item places" data-type="places"></div>
<div class="item things" data-type="things"></div>
<div class="item people" data-type="people"></div>
<div class="item places" data-type="places"></div>
<div class="item things" data-type="things"></div>
<div class="item people" data-type="people"></div>
<div class="item places" data-type="places"></div>
<div class="item things" data-type="things"></div>
<div class="item people" data-type="people"></div>
<div class="item places" data-type="places"></div>
<div class="item things" data-type="things"></div>
<div class="item people" data-type="people"></div>
<div class="item places" data-type="places"></div>
<div class="item things" data-type="things"></div>
<div class="item people" data-type="people"></div>
<div class="item places" data-type="places"></div>
<div class="item things" data-type="things"></div>         
</div>

CSS

#container { padding: 10px; }

.item {
 width: 90px;
 height: 130px;
 margin: 0 30px 30px 0;
 background: #eee;
 border: 3px solid #eee;  
}

.people { border-color: red; }
.places { border-color: yellow; }
.things { border-color: blue; }

.selected { background-color: #000; }

JavaScript

$(function() {
    var $container = $('#container'),
        $items = $('.item');

    function initIsotope() {
        $container.isotope({
            itemSelector: '.item',
            layoutMode: 'cellsByRow',
            cellsByRow: {
                columnWidth: 120,
                rowHeight: 160
            },
            getSortData: {
                type: function($items) {
                    return $items.attr('data-type');
                }
            }
        });
    }
    initIsotope();

    $('.item').bind('click', function(event) {

        $caller = $(this);
        $type = $caller.attr('data-type');

        $container.find('.selected').removeClass('selected');

        $('.' + $type).each(function() {

            $(this).addClass('selected');

            $grouped = $(this).not($caller);
            $grouped.insertAfter($caller);

            //$container.isotope( 'reLayout' );             
            //$container.isotope( 'addItems', $grouped );            
            //$container.isotope( 'insert', $grouped );
        });

        $container.isotope('destroy');
        initIsotope();

    });

});