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

瀑布流布局已成为当今非常普遍的图片展示方式,无论是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有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
瀑布流
原生js瀑布流、javascript 瀑布流、javascript瀑布流代码、javascript脚本示例、javascript示例,以便于您获取更多的相关知识。

时间: 2024-10-28 10:33:07

原生js实现移动端瀑布流式代码示例_javascript技巧的相关文章

javascript实现仿百度图片的瀑布流加载效果_javascript技巧

由于没有服务器,就用一个json字符串作为下拉时加载图片数据的来源了 html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="js/waterfall.js"></script> <styl

原生Js页面滚动延迟加载图片实现原理及过程_javascript技巧

原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

基于原生js淡入淡出函数封装(兼容IE)_javascript技巧

在开发的过程中,我们要做淡入淡出效果的话,我们完全可以使用jQuery的fadeTo()方法.但是我们的目的不只是会用,而是理解程序底层的逻辑.这篇文章主要就是利用原生的javascript实现淡入淡出的效果. 构建框架,基本没难度. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度函数的封装</title> <style type

原生js和jquery分别实现横向导航菜单效果_javascript技巧

本文实例为大家分享了原生js和jquery横向导航菜单的制作方法,供大家参考,具体内容如下 原生javascript实现: 这一次要实现的是鼠标放上去以后,菜单栏被选中的那一栏水平拉伸,鼠标离开后水平收缩.并带有一定的时间性,使肉眼能够看出其拉伸收缩的动画效果. 开始用javascript进行编写: 首先在之前水平方向的导航栏上进行操作,将第一栏和选中栏的样式只改变为背景变黑色,文字变白色 .on,a:hover{background:#000000;color:#FFFFFF;}  之后开始写

原生js实现弹出层登录拖拽功能_javascript技巧

在WEB开发过程中,总会遇到一些从未接触过的需求,总是想尽一切办法去研究,最终实现效果,在实现效果的那一刻成就感爆棚,有木有? 留言墙.弹出框等一些常见地方都有拖拽功能,方便用户体验嘛. 实现拖拽功能 ,三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight),窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理. 之前做的比较多的留言墙效

原生js实现数字字母混合验证码的简单实例_javascript技巧

本文实例讲述了原生js实现数字字母混合验证码的全部代码,重点是注释很详细,便于大家理解,特分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> <style type="text/css"> body, div { margin:

js基于cookie方式记住返回页面用法示例_javascript技巧

本文实例讲述了js基于cookie方式记住返回页面的用法.分享给大家供大家参考,具体如下: 首先明确以下概念 ①. 同名的 cookie,不同的 domain 或不同的 path,属不同的 cookie: 同名的 cookie,相同的 domain 且相同的 path,不同的 expires,属同一个 cookie. ②. 不加过期时间的cookie在浏览器关闭后失效 ③ 二级域名cookie可以生效,通过指定domain 于是在js端 document.cookie="back_url=&qu

js实现的tab标签切换效果代码分享_javascript技巧

这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码.点击上面的标题即可实现对应页面的切换功能,非常具有实用价值. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现的tab标签切换效果代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

JS实现拖动滚动条评分的效果代码分享_javascript技巧

小编教你JS特效拖动滚动条可以评分效果,小编感觉挺不错,用时候可能需要ASP/PHP或其它语言配合取值并写入数据库,这是前台的实现. 直接上代码 看看JS的神奇吧! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>