74.js---移动端文章的瀑布流的实现。

时间 2019-12-10

原文原文链接

移动端文章的瀑布流的实现。html

1.首先在前端html页面已经经过PHP代码循环彻底数据。前端

2.而后在js先所有隐藏，经过判断滑动到底部，每次加载一部分数据，直到数据所有显示彻底。ide

js代码：this

// 瀑布流

//获取文章的总长度
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();

$(".trim-content-active>li:last-child").after("<section class=\"all-end\">\n" +
    "    <i><img src=\"/public/static/sj/img/icon/icon-end.png\" alt=\"\"></i>\n" +
    "    <p></p>\n" +
    "    <span>已经翻到底啦</span>\n" +
    "</section>")

}else{
console.log("跳出")
}
}
});
}

本文原创，转载请标明做者，违者必究！spa