Javascript 从jQuery创建动态div时，massy.js不起作用

我正在通过从免费代码营获得camper news API的链接来创建一个页面，当我尝试将新闻链接的布局与不同的图像大小对齐时，我很难让massy.js正常工作。这是我的密码：

$(document).ready(function() {
  $.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
    var html = ""
    json.forEach(function(val) {
      html += "<div class='grid-item'>";
      html += "<a href='" + val.link + "' target='_blank'>";
      if (val.image === "" || val.image === "undefined") {
        html += "<img src='" + val.author.picture + "'>";
      } else {
        html += "<img src='" + val.image + "'>";
      }
      html += "</a>"
      html += "<p><a href='" + val.link + "' target='_blank'>" + val.headline + "</a></p>"
      html += "<p>" + val.rank + " points</p>";
      html += "</div>"
    });
    $("#camper-news").html(html);
    $(".grid-item:first").removeClass().addClass("grid-sizer")
  });
  $('#camper-news').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true,
    gutter: 5
  });

});

$（文档）.ready（函数（）{
$.getJSON（“http://www.freecodecamp.com/news/hot，函数（json）{
var html=“”
forEach（函数（val）{
html+=“”；
html+=“”
html+=“
”
html+=“”+val.rank+“点数”
”；
html+=“”
});
$（“#露营新闻”）.html（html）；
$（“.grid item:first”）.removeClass（）.addClass（“网格大小器”）
});
$（“#露营者新闻”）({
itemSelector:“.grid项”，
columnWidth:“.grid sizer”，
位置：正确，
排水沟：5
});
});

我已经建立了一个包含html和css的in-codepen

---

我已经尝试按照提供的文档使用

jQuery

初始化

massy.js

，但由于某种原因，它不起作用。我尝试过通过设置断点进行调试，在代码中初始化砖石结构，然后单击“跳过下一个函数调用”。虽然我对使用Chrome调试工具还是比较陌生，但我确实看到它通过了massy.pkgd.min.js文件，所以我认为我已经正确初始化了massy。我还研究了与StackOverflow上的

Massy.js

相关的其他问题，但还没有找到解决方案。我想知道是不是因为我用

jQuery

加载了

div

s，初始化的位置不对：

$(document).ready(function() {
  $.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
    var html = ""
    json.forEach(function(val) {
      html += "<div class='grid-item'>";
      html += "<a href='" + val.link + "' target='_blank'>";
      if (val.image === "" || val.image === "undefined") {
        html += "<img src='" + val.author.picture + "'>";
      } else {
        html += "<img src='" + val.image + "'>";
      }
      html += "</a>"
      html += "<p><a href='" + val.link + "' target='_blank'>" + val.headline + "</a></p>"
      html += "<p>" + val.rank + " points</p>";
      html += "</div>"
    });
    $("#camper-news").html(html);
    $(".grid-item:first").removeClass().addClass("grid-sizer")
    $('#camper-news').masonry({
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true,
      gutter: 5
    });
  });


});

$（文档）.ready（函数（）{
$.getJSON（“http://www.freecodecamp.com/news/hot，函数（json）{
var html=“”
forEach（函数（val）{
html+=“”；
html+=“”
html+=“
”
html+=“”+val.rank+“点数”
”；
html+=“”
});
$（“#露营新闻”）.html（html）；
$（“.grid item:first”）.removeClass（）.addClass（“网格大小器”）
$（“#露营者新闻”）({
itemSelector:“.grid项”，
columnWidth:“.grid sizer”，
位置：正确，
排水沟：5
});
});
});

然后你必须使用图像加载插件 要确保已加载所有图像，请执行以下操作：

这是最终的解决方案：

---

任何一个链接都不再工作。