imagesLoaded is not included in Masonry, so you should use separate plugin. I would recommend to use compiled .min version.
Regarding your problem with stacked images: the problem is not in imagesLoaded neither Masonry. In your code imagesLoaded is waiting until all images loaded and then fires masonry. Having all images loaded, Masonry plugin can properly define their sizes and put on grid. Before that, browser loads images as usually and display 'em according to defined CSS, that's why they're messed up.
One of the possible solution is to hide elements by default and then fadein while imagesLoaded confirm, that images loaded:
$(document).ready(function() {
var $boxes = $('.box');
$boxes.hide();
var $container = $('#post-area');
$container.imagesLoaded( function() {
$boxes.fadeIn();
$container.masonry({
itemSelector : '.box',
columnwidth: 300,
gutter: 20,
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
});
});
});