Масонство/imagesLoaded: предотвращение обновления макета от перемещения уже загруженных предметов

Question

Я использую масонство и изображение. Загружается, чтобы загрузить стену изображений: каждый раз, когда изображение загружается, макетная компоновка обновляется.

Это работает по назначению, но проблема в том, что большую часть времени масонство перемещает уже загруженные предметы в другую позицию при обновлении. Есть ли способ заставить масонство сохранить уже упорядоченные предметы, где они есть?

Все изображения имеют одинаковую ширину (но не такую ​​же высоту).

HTML (с Bootstrap):

<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 к см., если это то же самое желаемое поведение. Надеюсь, поможет!