原生js实现移动端瀑布流式代码示例


Posted in Javascript onDecember 18, 2015

瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上。最近使用到了“懒加载”,现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js 。当然也可以和jQuery 通用。
代码如下:

function loadImgLazy(node) {
 var lazyNode = $('[node-type=imglazy]', node),
  mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject,
  imgDataSrc, localUrl;

 localUrl = location.href;
 // 获取当前浏览器可视区域的高度
 mobileHeight = $(window).height();

 return function(co) {

  var conf = {
   'loadfirst': true,
   'loadimg': true
  };

  for (var item in conf) {
   if (item in co) {
    conf.item = co.item;
   }
  }

  var that = {};
  var _this = {};
  /**
   * [replaceImgSrc 动态替换节点中的src]
   * @param {[type]} tempObject [description]
   * @return {[type]}   [description]
   */
  _this.replaceImgSrc = function(tempObject) {
   var srcValue;

   $.each(tempObject, function(i, item) {
    imgObject = $(item).find('img[data-lazysrc]');
    imgObject.each(function(i) {
     imgDataSrc = $(this).attr('data-lazysrc');
     srcValue = $(this).attr('src');
     if (srcValue == '#') {
      if (imgDataSrc) {
       $(this).attr('src', imgDataSrc);
       $(this).removeAttr('data-lazysrc');
      }
     }
    });
   });
  };

  /**
   * 首屏判断屏幕上是否出现imglazy节点,有的话就加载图片
   * @param {[type]} i) {     currentNodeTop [description]
   * @return {[type]} [description]
   */
  _this.loadFirstScreen = function() {
   if (conf.loadfirst) {
    lazyNode.each(function(i) {
     currentNodeTop = $(this).offset().top;
     if (currentNodeTop < mobileHeight + 800) {
      _this.replaceImgSrc($(this));
     }
    });
   }
  };

  //当加载过首屏以后按照队列加载图片
  _this.loadImg = function() {
   if (conf.loadimg) {
    $(window).on('scroll', function() {
     var imgLazyList = $('[node-type=imglazy]', node);
     for (var i = 0; i < 5; i++) {
      _this.replaceImgSrc(imgLazyList.eq(i));
     }
    });
   }
  };

  that = {
   replaceImgSrc: _this.replaceImgSrc(),
   mobileHeight: mobileHeight,
   objIsEmpty: function(obj) {
    for (var item in obj) {
     return false;
    }
    return true;
   },
   destory: function() {
    if (_this) {
     $.each(_this, function(i, item) {
      if (item && item.destory) {
       item.destory();
      }
     });
     _this = null;
    }
    $(window).off('scroll');
   }
  };
  return that;
 };
}

以上所述就是本文给大家分享的全部内容了,希望能够对大家熟练使用javascript有所帮助。

Javascript 相关文章推荐
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
js使用心得分享
Jan 13 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
jQuery Validate表单验证入门学习
Dec 18 #Javascript
jQuery定义插件的方法
Dec 18 #Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 #Javascript
jquery实现二级导航下拉菜单效果
Dec 18 #Javascript
学习jQuey中的return false
Dec 18 #Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 #Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 #Javascript
You might like
第十一节 重载 [11]
2006/10/09 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python更换pip源方法过程解析
2020/05/19 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
业务员自荐信范文
2014/04/20 职场文书
岗位说明书范文
2014/05/07 职场文书
应急管理培训方案
2014/06/12 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书