Masonry - basic item resizing

re https://github.com/desandro/masonry/issues/98

by Tauseef Ahmed

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<div id="container">
    <div class="box">
        <img src="http://images.huffingtonpost.com/2007-11-01-ice.jpg" />
    </div>
    <div class="box">
        <img src="http://www.wwalls.ru/mini/201211/57608.jpg" />
    </div>
    <div class="box">
        <img src="http://artistsandwriters.com/site/wp-content/uploads/2014/09/IMG_7303LR-390x150-1412284267.jpg" />
    </div>
</div>

CSS

#container {
    max-width: 580px;
}
.box {
    float: left;
    width:50%;
}

.box img {
    width: 100%;
    height:auto;
    max-width:100%;
}

JavaScript

$(function () {

    var container = $('#container');

    // Trigger masonry
    container.masonry({
        itemSelector: '.box',
    });
});