Javascript 砌体柱宽度问题

我有一个很好的砖石布局，尽管使用ImageLoaded（可能不正确），我仍然在初始负载上得到重叠。它修复了窗口大小的问题，所以我想我只是没有在加载图像后正确调用重新排列。有人有什么想法吗？我觉得这应该非常简单，但我是个笨蛋：/

JS

$( function() {

  var $container = $('#container').masonry({
    itemSelector: '.item',
    columnWidth: '.item'
  });

  $( function() {
    var $items = getItems();
    $container.masonryImagesReveal( $items );
  });

});

$.fn.masonryImagesReveal = function( $items ) {
  var msnry = this.data('masonry');
  var itemSelector = msnry.options.itemSelector;
  // hide by default
  $items.hide();
  // append to container
  this.append( $items );
  $items.imagesLoaded().progress( function( imgLoad, image ) {
    // get item
    // image is imagesLoaded class, not <img>, <img> is image.img
    var $item = $( image.img ).parents( itemSelector );
    // un-hide item
    $item.show();
    // masonry does its thing
    msnry.appended( $item );
  });

  return this;
};


var imgcount=0

function getItem() {
  imgcount += 1;
  var item = '<div class="item">'+
    '<img src="http://engraminationindustries.com/clients/huron/images/work/Huron_' + 
      imgcount + '.jpg" /></div>';
  return item;
}

function getItems() {
  var items = '';
  for ( var i=0; i < 88; i++ ) {
    items += getItem();
  }
  // return jQuery object
  return $( items );

}

body { font-family: sans-serif; }

#container {
  background: #DDD;
}

.item {
  width: 33.333%;
  float: left;
}

.item-sizer{
  width: 33.333;
}

.item img {
  display: block;
  width: 100%;
}

button { font-size: 18px; } 

---

既然你找到了解决问题的正确方法。你可以编辑你的帖子或这个问题的答案。我将删除我的错误答案。因为你找到了正确的答案。您可以编辑此问题的帖子或答案。我将删除错误答案。