Ghost博客系统默认提供的博文列表为传统的翻页方式(通过点击上一页、下一页等按钮来切换),随着移动客户端的发展,瀑布流式的滚动加载方式得到广泛应用,有效地提高了用户浏览信息的流畅度。下面详述如何通过Infinite Scroll来改造Ghost博文列表的翻页效果。

Infinite Scroll

Infinite Scroll顾名思义:无限滚动,也称为自动分页、滚动分页和无限分页,是基于jquery的一个插件。可以用来实现滚动页面的时候加载下一页的内容。

infinite-scroll项目地址

实现步骤

  • 将jquery.infinitescroll.min.js拷贝到你的主题目录下
  • 在循环获取posts列表的页面上引入jquery.infinitescroll.min.js文件

注意:jquery.infinitescroll.min.js必须在jquery引入之后

<script src="{{asset "js/jquery.infinitescroll.min.js"}}"></script>
  • 尝试一下最简配置,若我们的页面结构如下
{{#foreach posts}}
<article class="{{post_class}}">
{{!有封面的时候展示封面}}
{{#if image}}
<a class="post-pic hidden-xs" href="{{url}}" style="background-image: url({{image}});"></a>
{{/if}} <header class="post-header">
<h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
</header>
<section class="post-excerpt">
<p>{{excerpt characters="140"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
</section>
<footer class="post-meta">
{{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
{{author}}
{{tags prefix="&nbsp;<i class=\"fa fa-tags\"></i>&nbsp;"}}
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="YYYY年MM月DD日"}}</time>
</footer> </article>
{{/foreach}} <nav class="pagination" role="navigation">
{{#if prev}}
<a class="newer-posts" href="{{page_url prev}}">&larr; 上一页</a>
{{/if}}
<span class="page-number">第 {{page}} 页 &frasl; 共 {{pages}} 页</span>
{{#if next}}
<a class="older-posts" href="{{page_url next}}">下一页 &rarr;</a>
{{/if}}
</nav>
  • 我们可以通过如下代码将原来点击上一页、下一页的翻页模式变成滚动翻页
<script>
$(document).ready(function (){
$('#posts-content').infinitescroll({
navSelector : "nav.pagination",
nextSelector : "nav.pagination a:last",
itemSelector : "article"
});
});
</script>

使用解析

  • 通过id选择器$('#posts-content')选中post列表的循环展示区域,后续加载的内容会被append到这个节点之下
  • navSelector参数,用来选中翻页模块的html位置,如上配置即选中了nav标签class为pagination的元素,框架会将这部分内容隐藏(隐藏原来的翻页模块)
  • nextSelector参数,标出下一页的请求链接,框架根据此获取下一页的请求以发起ajax请求获取下一页的html内容
  • itemSelector参数,在发起了下一页请求之后,通过这个参数的配置来截取下一页html内容中post部分来填充到navSelector选中位置的最后

进阶配置

在完成了上面操作之后,还可以做一些进阶的配置,比如修改加载中的文字描述,没有内容之后的提示内容等等。

下面是本站使用的配置,供参考。

<script>
$(document).ready(function (){
$('#posts-content').infinitescroll({
navSelector : "nav.pagination",
nextSelector : "nav.pagination a:last",
itemSelector : "article",
animate : false,
bufferPx: 5,
extraScrollPx: 50,
loading: {
speed: 'fast',
selector: null,
msgText: '加载中...',
finishedMsg:'<div class="post-loading">没有更多了</div>'
}
});
});
</script>

更多参数配置可参见:infinite-scroll

本博客主题项目地址

使用infinite-scroll实现Ghost博文列表的滚动加载的更多相关文章

  1. 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  2. h5页面列表滚动加载数据

    h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...

  3. BaseHttpListActivity,几行代码搞定Android Http列表请求、加载和缓存

    Android开发中,向服务器请求一个列表并显示是非常常见的需求,但实现起来比较麻烦,代码繁杂. 随着应用的更新迭代,这种需求越来越多,我渐渐发现了实现这种需求的代码的共同点. 于是我将Activit ...

  4. [WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内存优化

    11.2.4 大数据量网络图片列表的异步加载和内存优化 虚拟化技术可以让Windows Phone上的大数据量列表不必担心会一次性加载所有的数据,保证了UI的流程性.对于虚拟化的技术,我们不仅仅只是依 ...

  5. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  6. phpcms列表分页ajax加载更多

    1.在phpcms\modules\content\index.php文件中添加以下函数: /*列表分页ajax加载更多*/ public function homeajaxlist() {  if( ...

  7. Windows Phone 8 实现列表触底加载

    [背景] 很多时候在做WP开发的过程中会遇到数据需要分页获取,根据微软官方的推荐方式,建议实现为Market中类似的体验,即滑动到列表的底部的时候加载更多的数据. 这一需求在早起WP7.1时代实现起来 ...

  8. Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 关于Web中列表页面的加载问题

    2017年5月23日,天气晴朗.尽管昨晚睡的不踏实,好在今天心情还不是很糟糕,近来事情颇多,尤其是对于TA的改变,至少目前还是没有习惯,但时间将会解决一切,这点深有体会.此时此刻,又想起了苏东坡的那首 ...

随机推荐

  1. 【第一周】第一周工作统计(psp)

    项目:词频统计 项目类型:个人项目 项目完成情况:已完成 项目改进:未变更 项目日期:2016.9.3-2016.9.4 3号 类别c 内容c 开始时间s 结束e 中断I 净时间T 项目实践 构思   ...

  2. Ubuntu系统下adb devices 不能显示手机设备

    1. 查看usb设备,命令:lsusb 结果如下:Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub B ...

  3. 第198天:js---内置对象的原型链和其他知识

    一.内置对象的原型链 1.Object原型 function test() {} alert(test.toString()); //新增属性 Object.prototype.mytest = fu ...

  4. 第112天:javascript中函数预解析和执行阶段

    关于javascript中的函数:  1.预解析:把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前  2.执行 :从上到下执行,但有例外(setTimeout,setInterval,aja ...

  5. ZOJ3466-The Hive II

    题意 有一个六边形格子,共 \(n\) 行,每行有 8 个位置,有一些格子不能走.求用一些环覆盖所有可走格子的方案数.\(n\le 10\) . 分析 插头dp,只不过是六边形上的,分奇数列和偶数列讨 ...

  6. 【codeforces914G】Sum the Fibonacci FWT+FST(快速子集变换)

    题目描述 给出一个长度为 $n$ 的序列 $\{s\}$ ,对于所有满足以下条件的五元组 $(a,b,c,d,e)$ : $1\le a,b,c,d,e\le n$ : $(s_a|s_b)\& ...

  7. [二]SpringBoot 之 简单的接口

    (1)编写一个实体类Demo package me.shijunjie.entity; public class Demo { private long id; private String name ...

  8. BZOJ4881 线段游戏(二分图+树状数组/动态规划+线段树)

    相当于将线段划分成两个集合使集合内线段不相交,并且可以发现线段相交等价于逆序对.也即要将原序列划分成两个单增序列.由dilworth定理,如果存在长度>=3的单减子序列,无解,可以先判掉. 这个 ...

  9. Day21-获取用户请求相关信息及请求头

    1. request里面还包含请求头等信息,可以打印看一下. views.py中的程序 from django.shortcuts import render,HttpResponse from dj ...

  10. 【刷题】BZOJ 1951 [Sdoi2010]古代猪文

    Description "在那山的那边海的那边有一群小肥猪.他们活泼又聪明,他们调皮又灵敏.他们自由自在生活在那绿色的大草坪,他们善良勇敢相互都关心--" --选自猪王国民歌 很久 ...