Masonry / imagesLoaded : prevent layout refresh from moving already loaded items - masonry

Question

I'm using Masonry and imageLoaded to load a wall of images : everytime an image is loaded, masonry layout is refreshed.
This works as intended, but problem is that most of the time, Masonry will move already loaded items to another position on refresh. Is there a way to force Masonry to keep already arranged items where they are ?
All the image have the same width (but not the same height).
HTML (with 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

I have the same issue (fixed width, different height and I want fixed items) and I resolve with the following code:
//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();
});
If you want to see it working and the effect, you could visit http://pintevent.com to see if is the same desired behavior. Hope it helps!