74.js---移动端文章的瀑布流的实现。
Posted sqyambition
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了74.js---移动端文章的瀑布流的实现。相关的知识,希望对你有一定的参考价值。
移动端文章的瀑布流的实现。
2.然后在js先全部隐藏,通过判断滑动到底部,每次加载一部分数据,直到数据全部显示完全。
js代码:
// 瀑布流
- //获取文章的总长度
- var liLength=$(".trim-content-active li").length;
- //规定每次加载的数据条数
- var page=10
- //一共加载多少次---本案无用
- var liH= Math.ceil(liLength/page);
- //加载列表数量的初始值
- var linn=0;
- console.log(liLength,liH);
- for(var i=page;i<liLength+1;i++) {
- //首先显示十条,其余的都隐藏
- $(".trim-content-active li").eq(i).hide();
- console.log(linn, i,"linn")
- //当滑到手机底部的时候
- $(window).scroll(function () {
- var scrollTop = $(this).scrollTop();
- var scrollHeight = $(document).height();
- var windowHeight = $(this).height();
- if (scrollTop + windowHeight == scrollHeight) {
- //滚动到底部执行事件
- //当总数是10的倍数时
- if(linn<liLength){
- //todo 不应该算条数,应该算次数(现在是算条数)
- linn = linn + page;
- $(".trim-content-active li").eq(linn + page).prevAll().show();
- $(".trim-content-active li").eq(linn + page).show();
- console.log("正在加载中",linn,liLength);
- //当总数没有规律时
- }else if(linn>liLength){
- //最后一条前面所有的兄弟都显示
- $(".trim-content-active li").eq(liLength-1).prevAll().show();
- //最后一条显示
- $(".trim-content-active li").eq(liLength-1).show();
- console.log(0)
- }else{
- console.log("跳出")
- }
- }
- });
- }
本文原创,转载请标明作者,违者必究!
以上是关于74.js---移动端文章的瀑布流的实现。的主要内容,如果未能解决你的问题,请参考以下文章