首页
所有分类
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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
Bootstrap入门书籍之（一）排版
Feb 17 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
基于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) 下载(1) 广播(8) 短波(8) 收音机(62) 无线电(12) 烈阳天道(2) 长波(3) 怀旧期刊(1) 保养(1)
You might like
萌王史莱姆”萌王性别尴尬！那“萌战”归女组还是男?
2018/12/17 日漫
我用php+mysql写的留言本
2006/10/09 PHP
初识PHP
2014/09/28 PHP
yii2实现分页，带搜索的分页功能示例
2017/01/07 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
JavaScript面向对象程序设计三 原型模式（上）
2011/12/21 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
JavaScript 异步调用
2017/10/25 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
python实现斐波那契数列的方法示例
2017/01/12 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Python实现FTP文件传输的实例
2019/07/07 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Python yield的用法实例分析
2020/03/06 Python
Python短信轰炸的代码
2020/03/25 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
Marc O’Polo俄罗斯官方在线商店：德国高端时尚品牌
2019/12/26 全球购物
怎样写留学自荐信
2013/11/11 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
六年级小学生评语
2014/12/26 职场文书
2015年端午节活动总结
2015/02/11 职场文书
2015年人事科工作总结
2015/04/28 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
《狼牙山五壮士》读后感：宁死不屈，视死如归
2019/08/16 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
Redis性能监控的实现
2021/07/09 Redis
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python