首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript实现瀑布流加载图片原理

Posted in Javascript onFebruary 02, 2016

讲一下大概的原理吧，还是先上图：

 javascript实现瀑布流加载图片原理

 功能描述：

  • 根据不同菜单的属性值分别加载不同的数据
  • 下拉滚动条到一定位置预加载图片，滚动条拉到最底下的时候渲染html；
  • 鼠标移到菜单，切换各个图片列表；
  • 鼠标移到图片列表上，显示详细信息； 

技术实现方案：

先梳理一下从加载到显示的流程：

1. 加载数据

2. 拼接HTML写入到页面

3. 检查刚刚写入的HTML中的img是否全部加载完成，如果是，进入5、否则进入4

4. 等待图片加载完成

5. 计算每个元素的位置

一开始的时候最头疼的是如何定位的问题，后来经过朋友指导终于解决：计算总共有多少列图片并且把每一列的高度都放到一个数组里面。每当一张图片加载完成的时候就查找这个数组里面最小的值，并且定位当前图片的top设置为这个值，完成后把这个图片的高度加上数组里面的最小值并且返回到数组里面，依次类推。 
 PS：因为这个功能代码太多，只能作基本的简单分解代码了：　

// 创建用于记录每列高度的数组
_getLowestCol: function() {
  t._cols = new Array(5),min = 0;
  // 初始化为0
  for (var i = 0; i < t._cols.length; i++) {
    if (cols[i] < cols[min]) {
      min = i;
    }
    return min;
  }
},
_reposition: function() {
  t._grids.each(function(i, grid) {
    //先显示出来
    grid = $(grid).show();
    
    var height = grid.outerHeight(), min = t._getLowestCol();

    // 定位
    grid.animate({
      left: (t._colWidth + t._colSpacing) * min,
      top: t._cols[min],
      opacity: 1
    },1000);
    // 记录高度
    t._cols[min] += height;
  });

}

　其次开发过程中遇到的难题是：因为如上图所示，鼠标移动到菜单栏需要切换图片列表，并且分别需要用瀑布流加载不同类型的数据。所以要处理在切换页面的时候如何才能做到每个页面只执行一次代码请求接口，而不需要每一次切换都重新请求数据接口，仅仅执行切换显示图片列表的操作就可以了。

考虑到每一个菜单都有一个自定义属性，所以这个问题轻易地解决了：建立一个对象来记录当前菜单是否已经执行过代码，如果没有就执行请求数据 。　

var isLoad = {};//是否载入过
labelType.mouseover(function() {
  var i = $(this).index();
  var api = _this.attr('api');//接口标识
  
  if(! isLoad[ api ]){
    isLoad[ api ] = i;
    loadData(wrapper, api);
  }
  
});

以下为全部代码：
html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{  list-style-type:none;}
li img{width:100%;list-style:none;}
</style>
</head>
<body>
  <div class="photo_box">
    <ul id="container" style="border:1px solid #000;width:80%;height:600px;overflow:hidden;margin:0 auto;position: relative;">
    </ul>
    <div id="loading" class="loading" style="text-align: center;margin-top: 20px;font-size: 1.2em;">加载中...</div>
    <div id="more" class="more"style="text-align: center;margin-top: 20px;font-size: 1.2em;"><input type="button" value="更 多" id="clear" /></div>
  </div>
<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script>
<script type="text/javascript">
seajs.use(['lib/jquery/1.11.x/index.js', '_example/waterFall_1.1/waterfall.js'], function($, waterFall) {
  waterFall.init({
    container: $('#container'),
    dataURL: 'http://www.woxiu.com/index.php?action=Index/Main&do=ApiZhuboGrade',
    dataType: 'jsonp',
    template: '<% for (var i = 0; i < data.length; i++) { %>' +
            '<li style="display: none;">' +
              '<img src=" <%-data[i].room_img%> ">' +
            '</li>' + 
          '<% } %>',
    colWidth: 200,
    colSpacing: 10,
    rowSpacing: 15,
    page: 1,
    pageEnd: 8,
  });

  // 限制同时展示的页数
  var loadCounter = 1;
  function pageNum(){
    if (loadCounter >= 3) {
      $('#more').show();
      $('#loading').hide();
      return true;
    } else {
      loadCounter++;
      $('#more').hide();
      $('#loading').show();
    }
    return false;
  }
  $('#clear').click(function() {
    loadCounter = 1;
    waterFall._loadNext();
  });
});

</script>
</body>

js：

/**
 * 瀑布流布局组件类
 * @param {Object} options 组件设置
 *    @param {NodeList} options.container 瀑布流容器
 *    @param {String} options.dataURL 数据地址
 *    @param {String} [options.dataType='jsonp'] 数据类型，json或jsonp
 *    @param {String}  options.template 模板编辑
 *    @param {Number} [options.colWidth] 图片大小。
 *    @param {Number} [options.colSpacing] 列间隔。
 *    @param {Number} [options.rowSpacing] 行间隔。
 *    @param {Number} [options.page=1] 数据开始页码
 *    @param {Number} [options.pageEnd] 数据末尾页码

 * @pageNum() 函数，如果不需要现在加载也是，需要把函数里面的判断去掉。


 从加载到显示的流程

1. 加载数据
2. 拼接HTML写入到页面
3. 检查刚刚写入的HTML中的img是否全部加载完成，如果是，进入5、否则进入4
4. 等待图片加载完成
5. 计算每个元素的位置

 */
define(function(require, exports, module) {
  'use strict';
  
  var Tmpl = require('lib/tmpl/2.1.x/index.js'),
    $ = require('lib/jquery/1.11.x/index.js');

  var waterFall = {
    init: function(options) {
      var t = this;
      t._container = options.container;
      t._template = options.template;
      t._colWidth = options.colWidth;
      t._colSpacing = options.colSpacing;
      t._rowSpacing = options.rowSpacing;
      t.dataURL = options.dataURL;
      t.dataType = options.dataType;
      t.page = options.page;
      t.pageEnd = options.pageEnd;
      t._switch = false;

      //计算有几列 总宽度 / (列宽 + 列间隔)
      t._totalCols = parseInt(t._container.width() / (t._colWidth + t._colSpacing));

      // 创建用于记录每列高度的数组
      t._cols = new Array(t._totalCols);
      // 初始化为0
      for (var i = 0; i < t._cols.length; i++) {
        t._cols[i] = 0;
      }

      t._loadingPage = options.page || 0;
      t._loadNext(options);

      //下拉滚动条加载
      var lastTime = new Date().getTime();

      $(window).scroll(function() {

        if ( !t._switch ) {
          //判断是否滚动过快,在ie下
          var thisTime = new Date().getTime();

          if (thisTime - lastTime < 50) {
            console.log(thisTime - lastTime);
            lastTime = thisTime;
            return;
          }

          if ($(window).scrollTop() + $(window).height() >= document.documentElement.scrollHeight) {
            lastTime = thisTime;
            t._loadNext();
          }
        }
      });
    },
    //加载器
    _loadNext: function(t) {
      var t = this;

      t._switch = true;
      //请求数据
      if (!t.trigger) {
        $.ajax({
          url: t.dataURL,
          data: { page: ++t._loadingPage },
          dataType:t.dataType,
          success: function(response){
            
            t.trigger = t._completeLoading(response);

          },
          error:function(){console.log('Error! 请求有误');}
        });  
      }
      return false;
    },
    //加载完数据调用此函数
    _completeLoading: function(result) {
      var t = this;
      if (t._loadingPage >= t.pageEnd) {
        $('#more').hide();
        $('#loading').html('<p>已是最后一页了喔 ^_^ ^_^</p>');
        return true;
      }
      else {
        //if (!pageNum()) {
          t._add(result);
        //};
      }
      
      return false;
    },
    //添加格子
    _add: function(result) {
      var t = this, grids = '';
      //调用模板
      var content = Tmpl.render(t._template, {data:result.data});
      //原始定位
        t._grids = $(content).css({
          position: 'absolute',
          left: t._container.width(),
          top: t._container.height(), 
          width: t._colWidth,
          opacity: 0
        });

      //把Html添加到容器
      t._container.append(t._grids);

      // 执行一次_reposition，如果所有图片都加载完成，该方法返回true，否则返回false
      if ( !t._reposition() ) {
        // 有图片未加载完，监听onload和onerror
        t._grids.find('img').bind('load error', function() {
          this.loaded = true;
          // 有图片加载完成，再次执行_reposition
          if (t._grids) {
            t._reposition();
          }
        });
      }
    },
    // 此方法用于获取高度最低的列
    _getLowestCol: function() {
      var cols = this._cols, min = 0;
      for (var i = 1; i < cols.length; i++) {
        if (cols[i] < cols[min]) {
          min = i;
        }
      }
      return min;
    },
    //定位
    _reposition: function() {

      var t = this, allImgsLoaded = true;

      // 检测图片是否全部加载完成
      t._grids.find('img').each(function(i, img) {
        if (!img.loaded && !img.complete) {

          allImgsLoaded = false;
        }
        return allImgsLoaded;
      });

      if (allImgsLoaded) {
        t._grids.each(function(i, grid) {
          //先显示出来
          grid = $(grid).show();
          
          var height = grid.outerHeight(), min = t._getLowestCol();

          // 非第一行的时候，要加上行间隔
          if (t._cols[min]) { t._cols[min] += t._rowSpacing; }
          // 定位
          grid.animate({
            left: (t._colWidth + t._colSpacing) * min,
            top: t._cols[min],
            opacity: 1
          },1000);
          // 记录高度
          t._cols[min] += height;
        });
        // 重设外层容器高度为最高列高度
        t._container.css( 'height', Math.max.apply(Math, t._cols) );
        t._switch = false;
        delete t._grids;
      }

      return allImgsLoaded;
    },
  }

  return waterFall;
});

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

javascript实现瀑布流加载图片原理

- Author -

带上饼干

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
HTTP状态代码以及定义（解释）
Feb 02 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 #Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 #Javascript
JavaScript实现的MD5算法完整实例
Feb 02 #Javascript
javascript禁止超链接跳转的方法
Feb 02 #Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 #Javascript
Node.js实现JS文件合并小工具
Feb 02 #Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 #Javascript
信号库(1) 定时任务(2) 绘图(1) variable_scope(1) turtle(1) 计时器(1) 三子棋(2) blinker(1) name_scope (1) Keras(3)
You might like
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python BS4库的安装与使用详解
2018/08/08 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
python利用opencv实现颜色检测
2021/02/23 Python
英国电子专家：maplin
2019/09/04 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
自荐信如何“自荐”
2013/10/24 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
大学四年个人自我小结
2014/03/05 职场文书
环保倡议书400字
2014/05/15 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
小学生学习保证书
2015/02/26 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技