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

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

＆＃13;

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

＆＃13;

我刚刚删除了这个，并将其替换为上面的代码段，现在它就像魔法一样！

设置无限滚动

1 个答案: