Isotop mit unendlicher Schriftrolle

Verwenden von Jetpack Infinite Scroll & Isotope (Mauerwerk).

Ich stehe vor einem Problem, bei dem ich nach jedem neuen Satz von Ajaxs das Isotopenlayout destroy und dann build . Wenn ich nicht mit diesem Ansatz fortfahre, wird der neue Satz von Posts, die jedes Mal mit unendlichem Scroll geladen werden, nicht mit dem Isotop-Layout als sein eigenes behandelt und sie verpassen Isotop-Styling. Also, ich muss das Isotop jedes Mal neu aufbauen, wenn ich den Trigger für die unendliche Scrollfunktion post-load .

Dieser Ansatz hinterlässt den Benutzer tatsächlich mit einem Flick-Effekt und scrollt zum Anfang des Isotopen-Layouts.

 //In functions.php function vg_infinite_scroll_init() { add_theme_support( 'infinite-scroll', array( 'container' => 'row-wrap', 'type' => 'scroll', 'render' => 'loop_p_arch_infinite_scroll_render', 'footer' => false, 'footer_widgets' => false, 'wrapper' => false, 'posts_per_page' => 9, ) ); } add_action( 'after_setup_theme', 'vg_infinite_scroll_init' ); function loop_p_arch_infinite_scroll_render() { while( have_posts() ) { the_post(); get_template_part( 'content', 'product' ); } } function vg_get_prod_arch_posts( $post_type = 'post' ) { $prodarch_posts = get_posts( array( 'numberposts' => 9, 'paged' => get_query_var( 'paged' ), 'post_type' => $post_type ) ); return $prodarch_posts; } // In archive-product.php  
//In content-product.php global $post; ?>
//In JS file jQuery(document).on("post-load", function(e) { jQuery('.grid').isotope('destroy'); jQuery('.grid').isotope({ itemSelector: '.grid-item', percentPosition: true, masonry: { columnWidth: '.grid-sizer', gutter: 5 } }); }); jQuery(window).load(function(){ jQuery('.grid').imagesLoaded(function() { jQuery('.grid').isotope({ itemSelector: '.grid-item', percentPosition: true, masonry: { columnWidth: '.grid-sizer', gutter: 5 } }); }) })

Solutions Collecting From Web of "Isotop mit unendlicher Schriftrolle"

Normalerweise erlaubt das Isotop das Anhängen neuer Gegenstände und dann einfach das Mauerwerk neu zu ordnen:

Irgendwo in Ihrer JS-Datei sollten Sie die Elemente, die Sie anhängen möchten, in eine Variable new_elements , zB new_elements

 jQuery('.grid').append(new_elements) .isotope('appended', new_elements) .imagesLoaded( function() { jQuery('.grid').istotope('layout'); }); 

Quelle: http://isotope.metafizzy.co/methods.html

Die Lösung

Danke an @vajrasar für den letzten Schliff.

Wenn Sie die Grid-Page-Schleife wiederholen, fügen Sie Folgendes hinzu:

 function loop_p_arch_infinite_scroll_render() { $paged = get_query_var( 'paged', 1 ); ?> 
< ?php while( have_posts() ) { the_post(); get_template_part( 'content', 'product' ); } ?>
< ?php }