Isotop + infiniteScroll + Wordpress + Bootstrap

Question

ich eine relativ einfache Sache, ich versuche ..

Ich habe eine benutzerdefinierte-post-Typ-Archiv Seite in Wordpress und ich zeigen zehn Beiträge pro Seite in Paginierung und laufen Isotop js für div packing und ich verwende next_posts_link(), um einen Link mit der ID '#next_archive_page' zu generieren. Alles gut und das alles funktioniert wie erwartet.

Jetzt versuche ich die jQuery hinzuzufügen, die die infiniteScroll Funktionalität implementieren, aber die einzige Art, wie ich die Bilder dieser neuen Beiträge ist zu machen, bekommen von ihnen die Bootstrap-Klasse von img-Flüssigkeit zu entfernen (dies ist einfach Breite: 100%; Höhe:; ...) ...

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

ich will nicht die ing-Flüssigkeit Klasse entfernen, weil ich es für mein ansprechendes Layout benötigen

So Auto Das Ergebnis ist, dass es die .grid-item Elemen anfügt ts von den nächsten benutzerdefinierten Post-Typ-Archivseiten an der richtigen Stelle, aber sie sind alle überlappend und die falsche Größe.

Wie bekomme ich infiniteScroll und Isotope, um mit Bootstrap-Reaktionsfähigkeit gut zu spielen?

Answer 1

Haben Sie sich das Styling der Elemente angesehen? Es klingt wie sie mit 0 Breite und/oder 0 Höhe hinzugefügt werden.