javascript实现瀑布流加载图片原理_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:16 PM

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

功能描述：

根据不同菜单的属性值分别加载不同的数据
下拉滚动条到一定位置预加载图片，滚动条拉到最底下的时候渲染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&#63;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程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1657

CakePHP 教程

1415

Laravel 教程

1309

PHP教程

1257

C# 教程

1229

显示更多

Related knowledge

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。

JavaScript的演变：当前的趋势和未来前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

JavaScript引擎：比较实施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

JavaScript：探索网络语言的多功能性 Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

Python vs. JavaScript：学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

如何使用Next.js（前端集成）构建多租户SaaS应用程序 Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

从C/C到JavaScript：所有工作方式 Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

如何安装JavaScript？ Apr 05, 2025 am 12:16 AM

JavaScript不需要安装，因为它已内置于现代浏览器中。你只需文本编辑器和浏览器即可开始使用。1)在浏览器环境中，通过标签嵌入HTML文件中运行。2)在Node.js环境中，下载并安装Node.js后，通过命令行运行JavaScript文件。

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题