IsoType Smart Resize

by Apple Ilagan

HTML

<script src="https://raw.github.com/desandro/isotope/master/jquery.isotope.min.js"></script>
<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>
<ul>
    <li>
        <img src="http://lorempixel.com/500/300/" />
    </li>
    <li>
        <img src="http://lorempixel.com/500/300/" />
    </li>
    <li>
        <img src="http://lorempixel.com/500/400/" />
    </li>
    <li>
        <img src="http://lorempixel.com/500/400/" />
    </li>
    <li>
        <img src="http://lorempixel.com/500/100/" />
    </li>
    <li>
        <img src="http://lorempixel.com/500/100/" />
    </li>
    <li>
        <img src="http://lorempixel.com/500/700/" />
    </li>
    <li>
        <img src="http://lorempixel.com/500/700/" />
    </li>
</ul>

CSS

ul {
    list-style-type: none;
}
ul li {
    width: 48%;
    margin:1% 0;
}
ul li img {
    width: 100%;
    height:auto;
    display: block;
}

JavaScript

var $container = $("ul");

var size = function () {
    console.log('wee!');
    $container.isotope({
        masonry: {
            columnWidth: $container.width() / 2
        }
    });
}

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: "li",
        animationEngine: "jquery",
        sortBy: "random",
        resizable: false,
        masonry: {
            columnWidth: $container.width() / 2
        }
    });
    
    size();
});

$(window).smartresize(size);
// $(size); // this is an issue, because the images haven't yet loaded!