基于 jquery.nicescroll 实现瀑布流

起因

PC端中大量使用 jquery.nicescroll 滚动条,现需实现列表瀑布流加载

实现过程

1、查看API,希望能直接找到加载至底部事件
检索后发现针对插件参数设置、加载样式描述十分详细,但关于事件描述较少


部分参数设置截图,更多需参考尾页链接

经调试、观察源码确定滚动事件方法可获取当前滚动条高度

debugger
部分源码
$("#xxxxx").getNiceScroll(0).scrollend(function (info) {
    console.log(info.current.y);
}

将捕获当前高度与全局高度对比

if ($("#xxxxx").getNiceScroll(0).page.maxh == info.current.y) {
    console.log("已到达页面底端");
}

2、触发该事件后,给予提示并加载新的内容

//判断是否已全部加载
if (vm.imageUrl.length == vm.imageAllCount) {
    loading("over");
    return;
} else {
    loading("load");
    //加载下一批数据
    loadImage(vm.imagePage);
}

示例

使用之前抓取得少量知乎头像,实现瀑布流加载

示例

示例链接
源码拷贝,直接保存.html格式即可浏览,若图片显示为X,可能是网速,也可能被墙......

源码涉及插件及版本











你可能感兴趣的:(基于 jquery.nicescroll 实现瀑布流)