CODEWITHSUNDEEP
javascriptjqueryajax
Josefine S
Josefine S

Reputation: 23

Using Isotope with imagesLoaded for Ajax loaded content

I'm using Isotope to create a masonry grid and I've implemented a load more button that fetches more items when clicked with AJAX.

In my AJAX success function I create the needed html for the grid item like so:

 htm = '';
 htm+= '<div class="item">';
 htm+= '<img src="' + imgSrc  + '">';
 htm+= '</div>';

And after that I append the element to a container and call a redo_isotope function

$container.append(htm);
redo_isotope()

My redo_isotope function:

  var $container = $('.grid');
  function redo_isotope(){
     $container.imagesLoaded( function(){
       $container.isotope({
         itemSelector: '.grid-item',
         transitionDuration:0,
         masonry: {
          gutter:15
         },
       });
     });
    $container.isotope().isotope('reloadItems');
  }

In most of the cases this makes the newly appended items layout nicely on the page without causing any overlapping issues, but in some of the cases the imagesLoaded function doesn't seem to fire properly causing the height of the appended items to be miscalculated and cut off.

Has anyone experienced a similar problem and in that case how did you solve it?

Upvotes: 0

Views: 1337

Answers (1)

Oitentaecinco
Oitentaecinco

Reputation: 11

Here's my suggestion:

1º append the content to the $container:

var htm = '<div class="item"><img src="' + imgSrc  + '"></div>';
$container.append( $(htm) );

2º call the isotope appended function:

$container.isotope( 'appended', $(htm) );

3º monitor the progress of the imagesLoaded() function ... & ...

4º trigger the isotope layout function everytime a image is loaded:

$container.imagesLoaded().progress(function(){
    $container.isotope( 'layout' );
});

Upvotes: 1

Related Questions