Масонство и Jetpack Infinite Scroll – проблема перекрытия

Я пытаюсь реализовать бесконечный свиток с масонством на моих страницах архива на моей теме, и у меня есть пара вопросов:

1) Кнопка «Загрузить больше сообщений» скрывается за начальными сообщениями при первой загрузке страницы, см. Желтый круг: Смотрите желтый круг здесь - маленькая серая коробка - это кнопка

Я немного глупо спрашиваю об этом, но я не знаю, как это исправить, потому что Jetpack загружает кнопку в том же контейнере, что и сообщения, что является поведением по умолчанию, и все сообщения абсолютно позиционируются из-за масонства, поэтому Я не могу clear кнопку против них с помощью CSS. Я хочу, чтобы кнопка была ниже сообщений.

2) (РЕШАЕМ, ПОСМОТРЕТЬ НИЖЕ ОТВЕТ) Когда я нажимаю кнопку, новые сообщения перекрываются / загружаются за начальные сообщения, см. Рисунок:

Перекрывающиеся столбы

Кажется, я не могу заставить масонство вызвать ретранслятор после загрузки новых сообщений. Я просмотрел этот пост http://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/ и этот вопрос https://wordpress.stackexchange.com/questions/108552/jetpack-infinite-scroll-masonry – двадцать двенадцать, но я не могу найти решение моей проблемы.

Разметка перед щелчком:

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

PHP, который я использую для Jetpack (тип сообщения – 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 (хотя я не думаю, что это проблема, поскольку начальные сообщения в порядке) … скомпилированный с помощью LESS, я использую 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; } 

Большое спасибо за любую помощь, которую любой может дать.

Solutions Collecting From Web of "Масонство и Jetpack Infinite Scroll – проблема перекрытия"

Я теперь решил точку (2), проблему перекрытия сообщений; возможно, это поможет кому-то другому.

Я изменил wrapper на true в функции mytheme_jetpack_setup на моем PHP (чтобы новые сообщения были обернуты в их собственный div)

И я сменил jQuery на:

  $('#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++; }); 

EDIT: Я также решил точку (1) тоже через CSS, не могу поверить, что мне потребовалось столько времени, чтобы понять, что это все, что нужно. Я добавил некоторое padding-bottom к моему контейнеру Masonry / Jetpack (в моем случае #content ) и задал в CSS следующее:

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

Это позиционирует его ниже элементов сетки и центрирует его. Надеюсь, это поможет кому-то. Вы можете сделать аналогичную вещь с #infinite-loader .