CODEWITHSUNDEEP
masonry
kursus
kursus

Reputation: 1404

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

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');
});

Upvotes: 0

Views: 781

Answers (1)

JP. Aulet
JP. Aulet

Reputation: 4398

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!

Upvotes: 0

Related Questions