Masonry + Infintine 滚动实现问题

Question

我设法在 WordPress 中使用砖石结构实现了无限滚动，它正在运行，但我有几个错误：

帖子应该在 ajax 中打开，但现在它不适用于添加的项目，仅适用于前几个。

显示所有帖子后，控制台输出错误： GET http://www.jcvergara.com/working/page/3/?_=1431138637809 404（未找到）。我不确定它与什么有关。如果有任何解决方法，我将不胜感激。

这是我的代码：

<div class="main">
    <div id="content" class="container">
        <div class="right-line"></div>

        <!-- List of categories, only on the first page -->
        <?php 
                $cur_url = $_SERVER['REQUEST_URI'];
                if ($cur_url == '/working/') {
                    echo '<div class="item tags">';
                    echo '<div class="item-title">';
                    echo '<span class="tag">Tags</span>';
                    echo '<ul><li><a href="/working/" class="active">All</a></li>';
                    wp_list_categories('orderby=term_group&title_li=');
                    echo '</ul></div></div>';
                }

            ?>

        <!-- Posts -->
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php $category = get_the_category(); ?>
                <div class="item <?php echo $category[0]->slug; ?>">
                    <a class="mask post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"></a>
                    <div class="item-title">
                        <span class="tag">
                            <?php echo $category[0]->cat_name; ?>
                        </span>
                        <h4><?php the_title(); ?></h4>
                    </div>
                    <div class="item-img">
                        <?php if (has_post_thumbnail( $post->ID ) ): ?>
                            <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
                            <div class="thumb" style="background-image: url('<?php echo $image[0]; ?>'); "></div>                                   
                        <?php endif; ?> 
                    </div>
                    <div class="item-text">
                        <?php the_excerpt(); ?>
                        <span class="more"><a href="#">Read more...</a></span>
                    </div>
                </div>
            <?php endwhile; ?>
        <?php endif; ?>
        <div class="clear"></div>       
    </div>
    <?php the_posts_navigation(); ?>
</div>

ajax开帖代码：

$(document).ready(function(){ 
$.ajaxSetup({cache:false});
$('.post-link').click(function(){
    $('.openarticle').css('display', 'block');

    var post_link = $(this).attr('href');

    $('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>');
    $('#openthis').load(post_link);
    $('<a></a>', {
        text: 'Close',
        class: 'close',
        id: 'close',
        href: '#'
    })
    .prependTo($('.openarticle .main'))
    .click(function() {
        $('.openarticle').css('display', 'none');
        $('#close').remove();
    });       
    return false;        
}); 
});

这里是link：http://www.jcvergara.com/working/

提前致谢。

Answer 1

您需要在无限滚动的回调函数中添加打开您的post的代码。（顺便说一句，您实际上应该包括无限滚动的特定代码和您在问题中打开 post 的代码，而不仅仅是给出 link。）

下面是无限滚动代码的一部分，应该对您有所帮助：

     function( newElements ) {
            var $newElems = $( newElements );
            $container.masonry( 'appended', $newElems );
  //add this to your code

   $('.post-link').click(function(){
    $('.openarticle').css('display', 'block');

    var post_link = $(this).attr('href');

    $('#openthis').html('<div class="title"><h2>Loading..</h2><div class="text"></div>');
    $('#openthis').load(post_link);
    $('<a></a>', {
        text: 'Close',
        class: 'close',
        id: 'close',
        href: '#'
    })
    .prependTo($('.openarticle .main'))
    .click(function() {
        $('.openarticle').css('display', 'none');
        $('#close').remove();
    });
    return false; 
    }); 

        }

您的错误消息与没有要通过 infinitescroll 加载的第 3 页有关

Masonry + Infintine 滚动实现问题

Masonry + Infintine scroll implementation problems

wordpress

jquery-masonry

infinite-scroll