javascript - 设置无限滚动

Question

现在我正在尝试在我的网站上设置无限滚动。最后我找到了一个几乎可以工作的插件 - jetpack .

问题:当您向下滚动时，新加载的帖子会放在显示的帖子之上。

已解决...解决方案见答案

我们如何解决这个问题？

解决方案建议？ 可能是因为我的主题使用 java-masonry 进行网格显示，我发现了 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);
			
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',
) );

这是我根据上述教程创建的名为 infinite-addon.js 的文件:

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

非常感谢您的帮助!!!如果您需要我的更多代码，请告诉我!

Answer 1

问题解决了。我在主题的/js/目录中找到了一个名为 funtions.js 的文件，其中包含以下代码，显然是为了使砌体工作:

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

我刚刚删除了它并将其替换为上面的代码片段，现在它就像变魔术一样有效!