7

做一个瀑布流的wordpress主题【2】

 3 years ago
source link: https://yuguo.us/weblog/make-a-waterfall-wordpress-theme-2/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

做一个瀑布流的wordpress主题【2】

余果 2012-02-16 back-end

上一篇已经实现了瀑布流wordpress主题的基本布局，接下来讲ajax加载内容。

标准的wordpress翻页代码是在大循环之外有以下代码：

<div id="nav-previous">

 <?php next_posts_link( __( 'Older posts') ); ?>

</div>

也就是说后台设置了每页显示10篇文章之后，就会每10篇一个翻页。 <h2>无限滚动</h2> 当屏幕滚动到页面底部的时候，我们希望触发一个事件来ajax载入新的文章进来。有一个js插件可以很方便的做到这一点：infinitescroll.js infinitescroll有一个官网，但已经停止更新好多年了，代码和文档都已经失效。最新的代码在github可以下载。读源代码也有比较清晰的说明。

引入infinitescroll.js之后可以在你的站点js中加入以下代码：

$container.infinitescroll({//这里是所有条目的容器，我们在上一篇中已经有了jQuery Object，就是$container
    navSelector  : "#nav-previous",

                   // 页面导航的选择器，这个会被隐藏

    nextSelector : "#nav-previous a",

                   // 这个是触发器，页面滚动到触发器的时候，就会开始ajax加载

    itemSelector : ".goods"

                   // selector for all items you'll retrieve

  });

除了基本的用法之外，插件还提供了一些参数来配置一些自定义风格，比如载入的动画。

此外，在masonry的官网也有介绍如何跟infinitescroll插件结合。

ajax载入就讲到这里，下一篇《自定义文章数据》。

我写字的地方迁移到公众号啦~欢迎关注我的公众号：余果专栏

user

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK