从 jQuery 创建动态 div 时，Masonry.js 不起作用答案

【问题标题】：Masonry.js not working when creating dynamic divs from jQuery从 jQuery 创建动态 div 时，Masonry.js 不起作用
【发布时间】：2016-02-02 12:50:20
【问题描述】：

我通过从 Free Code Camp 的露营者新闻 API 获取链接来制作页面，当我尝试将新闻链接的布局与不同的图像尺寸对齐时，我无法让 masonry.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
  });

});

我在 codepen 中设置了一个 demo，其中还包含 html 和 css

我尝试按照提供的文档使用jQuery 初始化masonry.js，但由于某种原因它无法正常工作。我已经尝试通过设置一个断点来进行调试，在该断点处我在代码中初始化了砌体，然后单击“跳过下一个函数调用”。虽然我对使用 Chrome 调试工具还是新手，但我确实看到它通过 masonry.pkgd.min.js 文件，所以我认为我已经正确初始化了砌体。我还在 StackOverflow 上查看了与masonry.js 相关的其他问题，但我还没有找到解决方案。我想知道是不是因为我用jQuery 加载了divs。

【问题讨论】：

标签： javascript jquery masonry

【解决方案1】：

初始化位置错误：

$(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
    });
  });


});

http://codepen.io/anon/pen/LGBQJK

那么你必须使用图片加载插件确保所有图像都已加载：

Masonry images overlapping above each other

这是最终的解决方案： http://codepen.io/anon/pen/jWpZXa

【讨论】：