동위 원소 + infiniteScroll + 워드 프레스 + 부트 스트랩 나는 비교적 간단한 일을 시도하고

Question

..

내가 워드 프레스에서 사용자 지정 포스트 형 아카이브 페이지가 내가 동위 원소 JS 매김 페이지 당 열 개 게시물을 표시하고 실행 div 포장에 대해서는 next_posts_link()을 사용하여 '#next_archive_page'ID로 링크를 생성합니다. 이 모든 것이 모두 예상대로 작동합니다. (이 그들로부터 IMG 유체의 부트 스트랩 클래스를 제거하는 것입니다

는 지금은 infiniteScroll 기능을 구현합니다 이는 jQuery를 추가하기 위해 노력하고있어하지만 유일한 방법은 내가 렌더링이 새 게시물의 이미지를 얻을 수 있습니다 단순히 폭 : 100 %; 높이 : 자동;) ... 나는 내 반응 레이아웃을 필요로하기 때문에 ING 유체 클래스를 제거하지 않는

<div class="row grid"> 
    <?php if($query->have_posts()) : while($query->have_posts()) : $query->the_post() ?> 
    <div class="grid-sizer col-4"> 
     <img class="img-fluid" src="..."> 
    </div> 
    <?php endwhile; endif; wp_reset_query() ?> 
</div> 

<script> 
    window.onload = function() { 

     var $grid = $('.grid').isotope({ 
      itemSelector : '.grid-item', 
      columnWidth : '.grid-sizer', 
      percentPosition : true 
     }); 

     $grid.infiniteScroll({ 
      hideNav: '.pagination', 
      path : '.pagination #next_archive_page', 
      scrollThresold: 200 
     }); 

     $grid.on('load.infiniteScroll', function(event, response, path) { 
      var $items = $(response).find('.grid-item'); 
      // It's the height: auto style that stops images displaying 
      $items.find('img').removeClass('img-fluid'); 
      $items.imagesLoaded(function() { 
       $grid.append($items); 
       $grid.isotope('insert', $items); 
      }); 
     }); 
    } 
</script> 

... 그래서

이 결과는 .grid-item elemen을 추가한다는 것입니다. 다음 맞춤 포스트 유형 아카이브 페이지가 올바른 위치에 있지만 모두 겹치고 잘못된 크기입니다.

어떻게하면 부트 스트랩 응답 성이 뛰어난 infiniteScroll과 동위 원소를 얻을 수 있습니까?

Answer 1

요소의 스타일을 보았습니까? 0 너비 및/또는 0 높이가 추가 된 것처럼 들립니다.