벽돌 무한 스크롤 겹쳐진 div

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

이 대신보십시오 : 응답 @Macsupport에 대한

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