Question

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

这是按预期工作的，但问题是大多数时候，Masonry会在刷新时将已装载的物品移动到另一个位置。 有没有办法强迫砌体保留已经安排好的物品？

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

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

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

1 个答案: