JSFiddle - React, Tailwind, and code Playground

by adrienne

HTML

<script src="http://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js"></script>
<script src="http://raw.github.com/desandro/isotope/master/jquery.isotope.js"></script>
<link rel="stylesheet" href="http://isotope.metafizzy.co/css/style.css">
<div id="controls">
    <ul>
        <li><a id="asc" href="#">Sort Ascending</a>
        </li>
        <li><a id="desc" href="#">Sort Descending</a>
        </li>
        <li><a id="thin" href="#">Narrow Images</a>
        </li>
        <li><a id="all" href="#">All Images</a>
        </li>
    </ul>
</div>
<div id="container" class="isotope">
    <img width="333" height="500" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" />
    <img width="369" height="500" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc.jpg" alt="Officer" />
    <img width="500" height="333" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4086/5013039583_26717f6e89.jpg" alt="Tony" />
    <img width="456" height="500" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939.jpg" alt="Kendra" />
    <img width="456" height="500" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4144/5013039541_17f2579e33.jpg" alt="Giraffe" />
    <img width="333" height="500" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" alt="Gavin" />
    <img width="333" height="500" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4113/5013039697_a15e41fcd8.jpg" alt="Anita" />
    <img width="359" height="500"...

CSS

#controls ul li {
    float:left;
    margin-right:20px;
}
#container {
    clear:both;
}
/**** Isotope filtering ****/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

JavaScript

jQuery(document).ready(function ($) {
    var $win = $(window),
        $con = $('#container'),
        $imgs = $("img");

    $con.isotope({
        layoutMode: 'fitRows',
        onLayout: function () {
            $win.trigger("scroll");
        }
    });

    $imgs.lazyload({
        effect: "fadeIn",
        failure_limit: Math.max($imgs.length - 1, 0)
    });

    $('#asc').click(function (event) {
        $con.isotope({
            sortAscending: true
        });
    });

    $('#desc').click(function (event) {
        $con.isotope({
            sortAscending: false
        });
    });

    $('#thin').click(function (event) {
        $con.isotope({
            sortAscending: true,
            filter: 'img[width="333"]'
        });
    });

    $('#all').click(function (event) {
        $con.isotope({
            sortAscending: true,
            filter: ''
        });
    });
});