砌體/ ​​imagesLoaded：防止佈局刷新移動已加載的項目

Question

我使用砌體和imageLoaded加載圖像牆：每次加載圖像時，砌體佈局刷新。

這可以按預期工作，但問題在於大部分時間，砌體會在刷新時將已加載的物品移動到另一個位置。 有沒有辦法迫使砌體保持已經安排好的物品？

所有的圖像都有相同的寬度（但不是相同的高度）。

HTML（自舉）：

<div class="container-fluid"> 
<div id="gallery"> 

    <div class="item col-sm-3"> 
    <img src="1.jpg" alt=""> 
    </div> 

    <div class="item col-sm-3"> 
    <img src="2.jpg" alt=""> 
    </div> 

    <div class="item col-sm-3"> 
    <img src="3.jpg" alt=""> 
    </div> 

    <!--more items --> 

</div> 
</div> 

JS：

// hide images 
$('.item img').hide(); 

//init Masonry 
var $grid = $('#gallery').masonry({ 
    itemSelector: '.item', 
    transitionDuration: 0, 
    percentPosition: true, 
}); 

// fade in and layout Masonry after each image loads 
imagesLoaded(".item img").on('progress', function(instance, image) { 
    $(image.img).fadeIn(); 
    $grid.masonry('layout'); 
}); 

Answer 1

我有同樣的問題（固定寬度，不同的高度和我想的固定項目），我用下面的代碼解析：

//Here I attach the new loaded items (html var) in the #container div. 
$("#gallery").append(html).each(function(){        
    $('#gallery').masonry('reloadItems'); 
});   

$('#gallery').imagesLoaded(function(){ 
    $('#gallery').masonry(); 
}); 

如果你想看到它的工作和效果，你可以訪問http://pintevent.com到看看是否有相同的期望行爲。希望能幫助到你！