无限加载模块（瀑布流）

wptutor 无限加载模块（瀑布流）已关闭评论 46 浏览量

JS（其他的跟按钮触发的代码一样）

jQuery(document).ready(function($) {
    var page = 2; // Start from page 2
    var loading = false;
    var maxPages = parseInt($('#load-more-btn').data('max-pages'));
    var allLoaded = false;
    
    // Hide the button since we're using scroll
    $('#load-more-container').hide();
    
    // Add loading indicator
    $('body').append('<div id="scroll-loader" style="display:none; text-align:center; padding:20px;"><span>Loading more posts...</span></div>');
    
    function loadMorePosts() {
        if (loading || allLoaded) return;
        
        loading = true;
        $('#scroll-loader').show();
        
        $.ajax({
            url: ajax_params.ajax_url,
            type: 'POST',
            data: {
                action: 'load_more_posts',
                page: page,
                nonce: ajax_params.nonce
            },
            success: function(response) {
                if (response) {
                    var newPosts = $(response).hide().fadeIn(600);
                    $('#posts-container').append(newPosts);
                    page++;
                    
                    if (page > maxPages) {
                        allLoaded = true;
                        $('#scroll-loader').html('<p style="color:#666;">No more posts to load.</p>').delay(2000).fadeOut();
                    }
                } else {
                    allLoaded = true;
                    $('#scroll-loader').html('<p style="color:#666;">No more posts to load.</p>').delay(2000).fadeOut();
                }
            },
            error: function() {
                console.log('Error loading posts');
            },
            complete: function() {
                loading = false;
                if (!allLoaded) {
                    $('#scroll-loader').hide();
                }
            }
        });
    }
    
    // Scroll event listener
    $(window).on('scroll', function() {
        if (allLoaded) return;
        
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();
        var documentHeight = $(document).height();
        
        // Load when user is 200px from bottom
        if (scrollTop + windowHeight >= documentHeight - 200) {
            loadMorePosts();
        }
    });
});