代码之家 › 专栏 › 技术社区 › avatarhzh

砖石建筑。从jQuery创建动态div时js不工作

masonry jquery javascript

avatarhzh · 技术社区 · 8 年前

我正在通过从免费代码营的露营者新闻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
  });

});

我已经建立了 demo 在同样包含html和css的codepen中

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

1 回复 | 直到 8 年前

Community rohancragg 7 年前

初始化位置错误:

$(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