砌体图像用CSS宽度显示

Question

我试图将Masonryjs用于imagesReveal＆＃34;插件＆＃34;以及基于CSS的元素的宽度（我需要它，因为我的项目使用媒体查询调整大小）。

这是我的代码：

$( function() {

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

    var $items = $("#items .item");
    $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;
};

这里的笔：
http://codepen.io/FezVrasta/pen/yEilq

正如您所看到的（检查图像）项目放置不正确，我做错了什么？