码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2019-05-21 12:51:40      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:通过   hide   ++   for   执行   部分   显示   PHP代码   scrolltop   

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

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

标签:通过   hide   ++   for   执行   部分   显示   PHP代码   scrolltop   

原文地址:https://www.cnblogs.com/sqyambition/p/10899043.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!