加载Javascript图像后，砌体无法工作

任何帮助都将不胜感激。Im brand spankin是砌体网格布局的新手。我试图让它工作，但没有这样的运气。我觉得这是因为图像是从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();
});  
});

/**CSS
*{框大小：边框框；}
/*强制滚动条*/
html{overflow-y:scroll；}
正文{字体系列：无衬线；}
/*----网格--*/
.电网{
背景：DDD；
}
/*清晰定位*/
.网格：之后{
内容：''；
显示：块；
明确：两者皆有；
}
/*-----网格项----*/
.grid sizer，
.表格项目{
宽度：33.333%；
}
.表格项目{
浮动：左；
}
.网格项img{
显示：块；
最大宽度：100%；
}
/**JS
$（函数（）{
var folder=“imgs/widding/”；
$.ajax({
url:文件夹，
成功：功能（数据）{
$（数据）.find（“a”）.attr（“href”），function（i，val）{
如果（val.match（/\（JPG）$/）{
$（“.grid”）。追加（“”）；
} 
});
}
});
变量$grid=$（'.grid'）。砌体({
itemSelector:“.grid项”，
位置：正确，
columnWidth:“.grid sizer”
});
//加载每个图像后的布局
$grid.imagesLoaded（）.progress（函数（））{
$grid.mashine（）；
});  
});

---

我做错了什么？我怎样才能让砌体确认JS加载的图像？谢谢

如果你在做砖石，为什么不使用css

columns

？请解释。