Masonry e Jetpack Infinite Scroll - Prestazioni di sovrapposizione

Question

Sto cercando di implementare Infinite Scroll con la muratura sulle mie pagine di archivio sul mio tema e ho un paio di problemi:

1) Il pulsante "Carica più post" è nascosto dietro i post iniziali quando si carica la pagina per la prima volta, vedere il cerchio giallo:

Mi sento un po 'stupido a chiederlo, ma non so come risolvere questo motivo perché Jetpack sta caricando il pulsante nello stesso contenitore dei post, che è solo il comportamento predefinito, e tutti i post sono assolutamente posizionati a causa della muratura così Non posso clear il pulsante contro di loro con CSS. Voglio che il pulsante sia sotto i post.

2) (Risolto, vedere la risposta seguente) Quando faccio clic sul pulsante, i nuovi post si sovrappongono/caricano dietro i post iniziali, vedere l'immagine:

Non riesco a convincere la muratura a innescare un relè dopo che i nuovi post sono stati caricati. Ho guardato questo post http://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/ e questa domanda https://wordpress.stackexchange.com/questions/108552/jetpack-infinite-scroll-masonry-on-twenty-twelve-overlap Ma non riesco a trovare una soluzione al mio problema.

Il markup prima del clic:

    <div id="content" class="site-content" role="main">

            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>

            <article class="featured">....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <nav role="navigation" id="nav-below" class="navigation-paging">...</nav>

            <div id="infinite-handle">
                <span>Older posts</span>
            </div>

    </div><!-- #content -->

Il markup generato dopo il clic:

    <div id="content" class="site-content" role="main">

            <div class="grid-sizer"></div>
            <div class="gutter-sizer"></div>                                    

            <article class="featured">....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <nav role="navigation" id="nav-below" class="navigation-paging">...</nav>

            <span class="infinite-loader" style="display:none">...</span>

            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>
            <article>....</article>

            <div id="infinite-handle">
                <span>Older posts</span>
            </div>

    </div><!-- #content -->

Il PHP che sto usando per Jetpack (il tipo di post in questione è mytheme_portfolio) :

function mytheme_render_infinite_scroll() {
    while ( have_posts() ) : the_post();
            if ('mytheme_portfolio' == get_post_type()) :
                get_template_part( 'content', 'archive-portfolio' );
            else :
                get_template_part( 'content', get_post_format() );
            endif;
    endwhile;
}

function mytheme_jetpack_setup() {
    add_theme_support( 'infinite-scroll', array(
        'container'      => 'content',
        'type'           => 'click',
        'render'         => 'mytheme_render_infinite_scroll',
        'wrapper'        => false,
        'posts_per_page' => 5,
    ) );
}
add_action( 'after_setup_theme', 'mytheme_jetpack_setup' );

Il jQuery:

(function( $ ) {

    $( document ).ready(function() {

        $('#content').masonry({
          columnWidth: '.grid-sizer',
          itemSelector: 'article',
          gutter: '.gutter-sizer'
        });

        $( document.body ).on( 'post-load', function () {
            $('#content').masonry({
              columnWidth: '.grid-sizer',
              itemSelector: 'article',
              gutter: '.gutter-sizer'
            });
        });

    });

}( jQuery ));

Il CSS (anche se non penso che sia il problema poiché i post iniziali vanno bene) ... compilato con meno, sto usando calc() Per rendere le cose reattive:

article,
.grid-sizer {
  width: calc(((100% - (4 - 1)*1.5em)/4)*(1) + ((1 - 1)*1.5em));
}
article.featured {
  width: calc(((100% - (4 - 1)*1.5em)/4)*(2) + ((2 - 1)*1.5em));
}
.gutter-sizer {
  width: 1.5em;
}

Grazie mille per qualsiasi aiuto che chiunque può dare.