How do i use imagesloaded with isotope layout

See more:

jQuery

layout

i found this script that works fine, the only problem is the elements overlap because I'm placing dynamic images inside of them. When I try to use imagesLoaded the layout breaks. How do I correctly call imagesLoaded with this script? I cant quite figure it out.

<script>
(function ($) {
    var $container = $('.example'),
        colWidth = function () {
            var w = $container.width(), 
                columnNum = 1,
                columnWidth = 0;
            if (w > 1200) {
                columnNum  = 4;
            } else if (w > 900) {
                columnNum  = 4;
            } else if (w > 600) {
                columnNum  = 3;
            } else if (w > 300) {
                columnNum  = 2;
            }
            columnWidth = Math.floor(w/columnNum);
            $container.find('.item').each(function() {
                var $item = $(this),
                    multiplier_w = $item.attr('class').match(/item-w(\d)/),
                    multiplier_h = $item.attr('class').match(/item-h(\d)/),
                    width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
                     height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
                $item.css({
                    width: width,
                     height: height
                });
            });
            return columnWidth;
        },
        isotope = function () {
            $container.isotope({
                resizable: false,
                itemSelector: '.item',
                masonry: {
                    columnWidth: colWidth(),
                    gutterWidth: 4
                }
            });
        };
    isotope();
    $(window).smartresize(isotope);
}(jQuery));
</script>

What I have tried:

<script>
$(document).ready(function ($) {
var $container = $('.example'),
$container.imagesLoaded( function() {
colWidth = function () {
var w = $container.width(),
columnNum = 1,
columnWidth = 0;
if (w > 1200) {
columnNum = 4;
} else if (w > 900) {
columnNum = 4;
} else if (w > 600) {
columnNum = 3;
} else if (w > 300) {
columnNum = 2;
}

columnWidth = Math.floor(w/columnNum);
$container.find('.item').each(function() {
var $item = $(this),
multiplier_w = $item.attr('class').match(/item-w(\d)/),
multiplier_h = $item.attr('class').match(/item-h(\d)/),
width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
$item.css({
width: width,
height: height
});
});
return columnWidth;
},

isotope = imagesLoaded( function() {
$container.isotope({
resizable: false,
itemSelector: '.item',
masonry: {
columnWidth: colWidth(),
gutterWidth: 4
}
});
};

isotope();
$(window).smartresize(isotope);
});
}(jQuery));

</script>