我正在尝试在我的主题归档页面上使用砌体实现无限滚动，我有几个问题：

1） 首次加载页面时，“加载更多帖子”按钮隐藏在初始帖子后面，请参见黄色圆圈：

问这个问题我觉得有点愚蠢，但我不知道如何解决这个问题，因为Jetpack将按钮加载到与贴子相同的容器中，这只是默认行为，而且所有贴子都是绝对定位的，因为砌石，所以我不能clear 使用CSS对其执行的按钮。我想把按钮放在柱子下面。

2） （已解决，请参见下面的答案）当我单击按钮时，新帖子会在初始帖子后面重叠/加载，请参见图片：

我似乎无法让砌体在新帖子加载后触发重新发布。我已经看过这个帖子了http://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/ 还有这个问题https://wordpress.stackexchange.com/questions/108552/jetpack-infinite-scroll-masonry-on-twenty-twelve-overlap 但我似乎找不到解决我问题的办法。

单击之前的标记：

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

单击后生成的标记：

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

我用于Jetpack的PHP（所讨论的帖子类型是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\' );

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

CSS（虽然我认为这不是问题，因为最初的帖子很好）。。。编译时使用更少的calc() 要使事情响应：

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

非常感谢任何人能给予的帮助。

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

    var infiniteCount = 1;
    $( document.body ).on( \'post-load\', function () {
        var elements = $(\'.infinite-wrap.infinite-view-\' + infiniteCount + \' article\');
        $(\'#content\').masonry( \'appended\', elements );
        infiniteCount++;
    });

#content #infinite-handle {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            padding-bottom: 2em;
        }