Настройка бесконечного прокрутки

Question

Я пытаюсь настроить бесконечный свиток в течение нескольких дней на моем сайте. Наконец-то я нашел плагин, который почти работает - jetpack.

ПРОБЛЕМА: Когда вы прокручиваете вниз, только что загруженные сообщения помещаются поверх отображаемых.

РЕШИТЬ ... Решение см ответить

Как мы решить эту проблему?

РЕШЕНИЕ ПРЕДЛОЖЕНИЕ? Возможно, это связано с тем, что моя тема использует java-масонство для отображения сетки, и я нашел this tutorial page, предоставляя фрагменты кода, чтобы справиться с этим.

Возможно, я выставил их в заблуждение?

Я добавил это в нижней части моей functions.php, чтобы епдиеие сценарий и настроить Jetpack

// Jetpack infinite js addon 
 

 
wp_register_script('ininite-addon', (get_template_directory_uri()."/js/infinite-addon.js"),'infinite-addon',false,true); 
 
\t \t \t 
 
wp_enqueue_script('infinite-addon'); 
 

 

 
    // Jetpack infinite scroll 
 

 
add_theme_support('infinite-scroll', array(
 
    'container' => 'post-area', 
 
    'footer' => 'footer', 
 
    'wrapper'  => false, 
 
    'posts_per_page' => '7', 
 
));

и это файл я создал называется бесконечномерным аддон. js в соответствии с упомянутым выше руководством:

jQuery(document).ready(function($) { 
 
    infinite_count = 0; 
 
    // Triggers re-layout on infinite scroll 
 
    $(document.body).on('post-load', function() { 
 
\t infinite_count = infinite_count + 1; 
 
\t var $container = $('#content'); 
 
\t var $selector = $('#infinite-view-' + infinite_count); 
 
\t var $elements = $selector.find('.hentry'); 
 
\t $elements.hide(); 
 
\t $container.masonry('appended', $elements, true); 
 
\t $elements.fadeIn(); 
 
    }); 
 
});

Благодарим вас за помощь! И дайте мне знать, если вам нужно больше моего кода!

Answer 1

Решает проблему. Я нашел файл с именем funtions.js в моей теме в/JS/каталог, который содержал следующий код, очевидно, для изготовления кладки:

$(document).ready(function() { 
 
    $('#post-area').masonry({ 
 
    // options 
 
    itemSelector : '.post', 
 
    // options... 
 
    isAnimated: true, 
 
    animationOptions: { 
 
    duration: 400, 
 
    easing: 'linear', 
 
    queue: false 
 
    } 
 
\t 
 
    }); 
 
});

Я просто удалил это и заменить его с снизу вверх, и теперь он работает как волшебство!