Question

I’m using jquery isotope to get the ‘masonry’ effect but having issues.

Firstly, the whole list of items loads straight down on the left first, then corrects itself, but it’s clearly visible that it does it, sometimes hanging there for a second or so.

Second issue is when i get down the page of loaded items (56 at a time) they sometimes overlap each other. if I click “show more” (using inf-scroll twitter method) then they correct them selves and again at the bottom of the new items they overlap.

As you can see i’m trying imagesloaded plugin but no different.

This is the code and settings for isotope:

var $container = $('#wall');

$container.imagesLoaded(function(){

  // isotope
  $container.isotope({
    itemSelector : '.wrap_indiv',
    transformsEnabled: false,
    getSortData: {
            name: function($element) {
                return $element.data('name');
            },

            site: function($element) {
                return $element.data('site');
            },

            date_added: function($element) {
                return $element.data('date_added');
            }

        }
  });

  // filter items when filter link is clicked
    $('#options a').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: selector });
      return false;
    });

    var $optionSets = $('#options .option-set'),
      $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('.option-set');
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    });

  // infinite scroll
  $container.infinitescroll({
    navSelector  : "#page_nav",
                 // selector for the paged navigation (it will be hidden)
  nextSelector : "#page_nav a",
                 // selector for the NEXT link (to page 2)
  itemSelector : ".wrap_indiv",
                 // selector for all items you'll retrieve
  behavior: "twitter",

  loading : {
            'finishedMsg' : 'No more to load.',
            'img' : '/images/icons/loading_sml.gif',
            'selector' : '#wall'
        }
    },
    // call Isotope as a callback
    function( newElements ) {
      $container.isotope( 'insert', $( newElements ) ); 
    }
  );

});

Any idea why these are happening?

Answer 1

Fixed half of the problem – the overlapping:

Change:

function( newElements ) {
  $container.isotope( 'insert', $( newElements ) ); 
}

to this:

function(newElements) {
      var $newElems = $(newElements);
      $newElems.imagesLoaded(function(){
        $container.isotope('appended', $newElems );
      });
    }