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

  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("跳出")
  • }
  • }
  • });
  • }

本文原创,转载请标明作者,违者必究!

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

  1. Node JS爬虫:爬取瀑布流网页高清图

    原文链接:Node JS爬虫:爬取瀑布流网页高清图 静态为主的网页往往用get方法就能获取页面所有内容.动态网页即异步请求数据的网页则需要用浏览器加载完成后再进行抓取.本文介绍了如何连续爬取瀑布流网页 ...

  2. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

  3. Ajax——瀑布流

    基本概念 1.宽度是一致的,高度上参差不齐 2.新增内容优先放置在最矮的地方 核心难点 1.用一个数组存储每列的高度值 2.新值添加到值最小索引上,每次替换更新数组 插件使用 1.$.fn.exten ...

  4. flex布局实现瀑布流排版

    网上有很多有关js(jq)实现瀑布流和有关瀑布流的插件很多,例如:插件(Masonry,Wookmark等等).按照正常的逻辑思维,瀑布流的排版(item列表)一般都是 由左到右,上而下排序的结果,单 ...

  5. 移动端三合一瀑布流插件(原生JS)

    没有前言,先上DEMO(手机上看效果更佳)和 原码. 瀑布流形式的图片布局方式在手机等移动端设备上运用广泛,比较常见的是下面前两种: 一.等宽等高 这种形式实现起来非常容易,这里就不再多说. 二.等宽 ...

  6. js中masonry与infinitescroll结合 形成瀑布流

    后台:(有点问题 page应该从1开始 而不是从0开始)     public function actionExperts()    {        $top=5;        $page=em ...

  7. js实现图片的瀑布流

    先看效果: 初始状态:

  8. js原生瀑布流

    背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...

  9. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

随机推荐

  1. java.net.MalformedURLException: unknown protocol: 异常

    开门见山的说,第一个参数u,赋的值是 "D://123.txt",于是乎,报错了,java.net.MalformedURLException: unknown protocol: ...

  2. windows正常,linux报错:'PHPExcel_Reader_excel2007' not found

    原因:因为在linux下,大小写敏感 我的文件夹命名是大写,在window小写可以访问到,但是在linux就大小写敏感导致没找到文件没导入成功 导入文件的路径(错误)import('phpexcel. ...

  3. pandas filter数据筛选

    https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&shareId=400000000398 ...

  4. Spring Boot源码中模块详解

    Spring Boot源码中模块详解 一.源码 spring boot2.1版本源码地址:https://github.com/spring-projects/spring-boot/tree/2.1 ...

  5. Spring中查看加载配置文件中 加载类的个数及详情

    断点到: org.springframework.beans.factory.support.DefaultListableBeanFactory#getBeanDefinitionCount 显示该 ...

  6. 《精通CSS第3版》(6)内容布局(定位+水平布局)

  7. 利用Entity Framework修改指定字段中的值

    利用Entity Framework修改指定字段中的值一般我们编辑某些模型的时候会用到类似这样的代码: [HttpPost] public ActionResult Edit(Article mode ...

  8. [LeetCode] 387. First Unique Character in a String 字符串的第一个唯一字符

    Given a string, find the first non-repeating character in it and return it's index. If it doesn't ex ...

  9. Qt 自定义QTabWidget

    思路: QTabWidget的特点:点击不同的选项卡显示不同的窗口.可以将QTabWidget分成两部分: (1).选项卡:点击时要知道点击的是哪个选项.则需要将选项卡和窗口的信息存起来,点击时去这个 ...

  10. mysql中数据表记录的增删查改(2)

    select `数据表.字段1`, group_concat(`数据表.字段2`) from `数据表` group by `数据表.字段1` order by `数据表.字段1` desc; sel ...