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

2022-09-08 22:35:58

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

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

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---移动端文章的瀑布流的实现。