砌体视图显示一个在另一个之下的图像

Question

我使用了 Masonry 视图插件，但是当通过 ajax 调用加载图像时，它们似乎显示在另一个下方（如列表）

HTML

    <div id="masonryView" data-ng-repeat="image in images">
            <div class="item">
              <a target="_blank" href="">
                <img src="{{image.imageSourceURL}}" alt="" width="250">
              </a>
              <div class="desc">{image.description}</div>
            </div>
    </div>

阿贾克斯

  $(window).load(function(){
    var $container = $('#masonryView').masonry();
    $container.imagesLoaded( function() {
    $container.masonry();
    });
  });

CSS

#masonryView {
 position: relative;
}

.item {
   margin: 10px;
   width: 100px; 
 }

似乎有一个问题可以解释为什么图像显示在另一个之下？

Answer 1

我在您发布的标有“AJAX”的代码中没有看到任何 AJAX，但您应该通过设置 itemSelector 以这种方式调用 masonry：

$(window).load(function(){
var $container = $('#masonryView').masonry();
$container.imagesLoaded( function() {
$container.masonry({itemSelector: '.item'});
});
});