原生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对象的使用和属性操作示例详解
Mar 02 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 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
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
python中cPickle用法例子分享
2014/01/03 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
关于.NET, HTML的五个问题
2012/08/29 面试题
EJB实例的生命周期
2016/10/28 面试题
高级护理实习生自荐信
2013/09/28 职场文书
2014年度考核工作总结
2014/12/24 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
入党申请书格式
2019/06/20 职场文书
创业计划书之物流运送
2019/09/17 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis