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>

的Ajax

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

砌体视图显示图像低于另一个

1 个答案: