Masonry Isnt在Javascript图像加载后工作

Question

任何帮助将不胜感激。 Im品牌spankin是Masonry网格布局的新手。我试图让它工作，但没有这样的运气。我觉得这是因为图像是在JS之后加载的。

<div class="grid">
  <div class="grid-sizer"></div>
</div>

/** CSS

* { box-sizing: border-box; }

 /* force scrollbar */
html { overflow-y: scroll; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
}

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

/** JS

$(function() {
    var folder = "imgs/wedding/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(JPG)$/) ) { 
                $(".grid").append( "<div class='grid-item'><img src='"+ folder + val +"'></div>" );
            } 
        });
    }

});


var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer'
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry();
});  
});

我做错了什么？我怎样才能让Masonry承认JS加载的图像？谢谢！