Question

我正在动态输入一些图像，然后将砌体插件应用于它们。然而，图像仍然看起来在页面上排成行，在较短的图像下面有足够的空白区域，使它们等于较高图像的高度。我希望他们能够融入砖石风格。有谁知道我做错了什么，拜托？如果你动态地显示html，你能使用砖石吗？

jquery的：

$.getJSON(school + "/data.json", function(data) {
  $('.images').empty();

  var images;
  images = data.images;
  captions = data.captions;
  videos = data.videos;
  var imgCount = images.length;
  $.each(images, function(key, value) {
    var caption = data.captions[key];
    $('.images').append('<div class="img-container"><div class="myitem"><img src="' + school + '/img/' + value + '" ><div class="caption">' + caption + '</div></div></div>');
    $('.images').masonry({
      columnWidth: 300,
      itemSelector: '.img-container'
    });
  });
});

的CSS：

.caption {
     color: lightgray;
    font-size: 90%;
    float: left;
    clear:both;
    margin: 0 10px 20px 10px;
    max-width: 300px;
}
.myitem {
    max-width: 300px; height: auto; margin: 10px;
}
.myitem img {
    max-width: 300px;
    height: auto;
}

Answer 1

你需要在你的img-container的父元素上调用.masonry（因此也在$ .each之外）

示例HTML：

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

示例JS：

 $('#container').masonry({...});

Masonry.js似乎没有工作

1 个答案: