移动端文章的瀑布流的实现。
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(); $(".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("跳出")} }}); }
本文原创，转载请标明作者，违者必究！
转载于:https://www.cnblogs.com/sqyambition/p/10899043.html
相关资源：手机版瀑布流