砌體視圖顯示一個接一個的圖像

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