Masonry/imagesLoaded:防止布局刷新移动已加载的项目

Question

我使用Masonry和imageLoaded来加载图像墙：每次加载图像时，都会刷新砖石布局。

这可以按预期工作，但问题是，大多数时候，Masonry会在刷新时将已经加载的项目移动到另一个位置有没有办法强迫Masonry将已经安排好的物品放在原处

所有图像都具有相同的宽度（但不具有相同的高度）。

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看看是否是相同的期望行为。希望它能有所帮助！