JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://psuk.s3.amazonaws.com/script/js/lib/jquery.imagesloaded.js"></script>
<script src="http://psuk.s3.amazonaws.com/script/js/lib/jquery.shapeshift.js"></script>
<div class="row">
    <div class="col-sm-2">
        <div class="list-group"> <a href="#" class="list-group-item disabled">Folders</a>
 <a href="#" class="list-group-item disabled">Home</a>

        </div>
    </div>
    <div class="col-sm-10">
        <div class="js-grid">
            <div class="col-sm-4 item">
                <div class="panel panel-default">
                    <img src="http://placehold.it/200x150">
                </div>
            </div>
            <div class="col-sm-4 item">
                <div class="panel panel-default">
                    <img src="http://placehold.it/200x450">
                </div>
            </div>
            <div class="col-sm-4 item">
                <div class="panel panel-default">
                    <img src="http://placehold.it/200x400">
                </div>
            </div>
            <div class="col-sm-4 item">
                <div class="panel panel-default">
                    <img src="http://placehold.it/200x150">
                </div>
            </div>
            <div class="col-sm-4 item">
                <div class="panel panel-default">
                    <img src="http://placehold.it/200x650">
                </div>
            </div>
            <div class="col-sm-4 item">
                <div class="panel panel-default">
                    <img src="http://placehold.it/200x250">
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

$(function () {
    var $container = $('.js-grid');
    $container.imagesLoaded(function () {
        $container.shapeshift({
            selector: '.item'
        });
    });

});