砌体视图显示一个接一个的图像

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以这种方式调用砌体：

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