尝试在wordpress中创建Ajax样式的“加载更多”按钮

Question

使用wordpress和同位素，我创建了一个存档页面，将单个帖子显示为同位素样式的磁贴。

它看起来有点像这样：http://i.imgur.com/t1jtWce.png

生成它的代码由同位素的网格系统组成：

$(document).ready(function () {
    var $container = $('.showcase');
        $container.isotope({
        itemSelector      : '.item',
        masonry           : {gutterWidth: 0, columnWidth: 1}
    });  
});

和wordpress/php调用来生成内容：

<div class="showcase">
    <? $project = new WP_Query( array( 'post_type' => 'project', 'posts_per_page' => 10, 'order' => 'DEC' ) ); while ( $project->have_posts() ) : $project->the_post();?>
        <div class="item">
            ~the bits and pieces that make up each post tile~
        </div>
    <? endwhile; wp_reset_postdata(); ?>
</div>

我已经缩短了一些，但如果需要的话，我可以提供更多的信息。

posts_per_page当前设置为10，这很好...我的目标是有一个加载更多的按钮，可以创建额外的瓷砖。

这是一个快速而肮脏的演示动画：http://i.imgur.com/D0JCSKN.gif

我想找到一种方法来做到这一点，而无需页面刷新。加分，如果它可以动画与同位素的内置css变换。

我相信同位素和它的无限滚动插件可以处理这样的事情，但我不确定如何将它绑定到Wordpress中的php循环中。

如果有人能提供建议，我将不胜感激。谢谢:)

Answer 1

我对Wordpress插件不太确定，但一般的方法是创建一个PHP页面，它会为您提供一个项目列表。你需要在那里传递偏移量和限制。例如，当您第一次加载页面时，您会得到

SELECT * FROM items LIMIT 10

然后，显示一个“显示更多”按钮，该按钮将通过ajax新的偏移/限制传递给php操作。一旦您知道您已经显示了10个项目，您只需传递参数

http://example.com/items/getlist?offset=10&limit=10

您可以通过XHR (http://api.jquery.com/jQuery.ajax/)来执行此调用，其中offset是已经显示的项的计数。然后您的php脚本使用sql获取结果。

SELECT * FROM items LIMIT 10, OFFSET 10

然后，您只需使用javascript将AJAX调用接收到的数据附加到div容器中。