設置無限滾動

我想在我的網站上設置無限滾動的日子。最後我發現了一個幾乎可以工作的插件 - jetpack。設置無限滾動

問題：當您向下滾動時，新加載的帖子被放在顯示的頂部。

解決？解決方案見回答

我們如何解決這個問題？

解決方案建議？也許這與我的主題使用java-masonry進行網格顯示有關，而我發現this tutorial page提供了代碼片段來處理這個問題。

也許我讓他們錯了？

我在functions.php的底部添加了這個入隊的腳本和配置噴氣揹包

// 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(); 
 
    }); 
 
});

謝謝你這麼多的任何幫助！讓我知道如果你需要更多我的代碼！

來源

2014-10-27 user2039379

解決了這個問題。我發現/載有下列代碼中調用我的主題的/ JS funtions.js文件目錄，顯然是使砌築工作：

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

我只是刪除這一點，並用它代替上面的代碼片段，現在它像魔術一樣工作！

來源

2014-10-27 16:05:37 user2039379

設置無限滾動

回答

相關問題