Изотоп Jquery - 2 вопроса - перекрытие в хроме и загрузка слева

Question

Я использую изотоп jquery, чтобы получить эффект "каменной кладки", но у меня есть проблемы.

Во-первых, весь список элементов сначала загружается слева вниз, затем исправляется, но ясно видно, что он это делает, иногда зависая там на секунду или около того.

Вторая проблема - когда я спускаюсь по странице загруженных элементов (56 одновременно), они иногда перекрывают друг друга. если я нажимаю "показать больше" (используя метод твиттера inf-scroll), они исправляют себя и снова в нижней части новых элементов, которые они перекрывают.

Как вы можете видеть, я пытаюсь подключить плагин для изображений, но не отличается.

Это код и настройки для изотопа:

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

});

Есть идеи, почему это происходит?

Answer 1

Исправлена ​​половина проблемы - перекрытие:

Изменить:

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

к этому:

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