0

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

它看起来有点像这样：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 变换进行动画处理，则可以加分。

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

如果有人可以提供建议，我将非常感激。谢谢 ：）

4

1 回答 1

2

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

SELECT * FROM items LIMIT 10

然后，您显示一个“显示更多”按钮，该按钮将通过 ajax new offset/limit 传递给 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 容器中。

于 2013-10-22T07:47:24.883 回答