Masonry - basic item resizing

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

by Mike Sozanski

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<div id="container">
    <div class="grid-sizer"></div>
    <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;
    margin-bottom: 5px;
}
.box img {
    width: 100%;
}
.grid-sizer {
    width: 50%;
}

JavaScript

$(document).ready(function () {
     var container = $('#container');

     $('.box').find('img').each(function () {
         var percent = $(this).width() / container.width() * 50;
         $(this).closest('.box').css('max-width', percent + '%');
     });

     // Trigger masonry
     container.imagesLoaded(function () {
         container.masonry({
             itemSelector: '.box',
             columnWidth: '.grid-sizer'
         });
     });
 });