Масонство Бесконечная прокрутка перекрывающихся divs

Question

Это, по-видимому, общая проблема, которую многие люди и, похоже, могут исправить, но в моем случае ни одно из решений, похоже, не работает для меня.

Страница загружается идеально, но перекрытие происходит при прокрутке и добавлении большего количества кирпичей. Кроме того, это происходит, только когда я впервые попал на страницу. Если я обновляюсь после того, как все уже загружено, при прокрутке нет перекрытия. Я думал, что imagesLoaded должен был обрабатывать это, но не работать atm. Не знаю, где я ошибся.

Для справки, вот страница, на которой я имею вопрос: http://isaacprice.me/blog/

Вот что мой код выглядит сейчас:

<script> 

    jQuery(function($) { 
     var $container = $('#all_posts'); 

     $container.imagesLoaded(function() { 
     var $msnry = $container.masonry({ 
       columnWidth: 240, 
       gutter: 20, 
       itemSelector: '.item', 
       "isFitWidth": true 
      }); 
     }); 

     $container.infinitescroll(
     // trigger Masonry as a callback 
     function(newElements) { 
      // hide new items while they are loading 
      var $newElems = $(newElements).hide(); 
      // ensure that images load before adding to masonry layout 
      //$newElems.imagesLoaded(function(){ 

      // show elems now they're ready 


      $msnry.append($newElems).delay(500).imagesLoaded(function() { 
       $newElems.fadeIn(); 
       $container.isotope('appended', $newElems); 
       //$msnry.append($newElems).masonry('appended', $newElems, true); 
      //$container.masonry('appended', $newElems, true); 
      }); 
      //}); 
     } 
    ); 
    }); 
    </script> 

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

Любая помощь будет очень оценена.

Answer 1

Смешанная кладка и изотоп. Вы сначала загружаются с кладкой, а затем вы вызываете изотоп с infinitescroll так:

$msnry.append($newElems).delay(500).imagesLoaded(function() { 
      $newElems.fadeIn(); 
      $container.isotope('appended', $newElems); //WRONG!! 
      //$msnry.append($newElems).masonry('appended', $newElems, true); 
     //$container.masonry('appended', $newElems, true); 

Попробуйте вместо этого:

$container.imagesLoaded(function() { 
      $newElems.fadeIn();   
     $container.masonry('appended', $newElems, true);