当前位置: 首页 > 编程笔记 >

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

宰父冠玉
2023-03-14
本文向大家介绍原生js实现移动端瀑布流式代码示例,包括了原生js实现移动端瀑布流式代码示例的使用技巧和注意事项,需要的朋友参考一下

瀑布流布局已成为当今非常普遍的图片展示方式,无论是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+jquery+css3),包括了瀑布流的实现方式(原生js+jquery+css3)的使用技巧和注意事项,需要的朋友参考一下 前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写。最近闲来没事,就自己写个。大致思路理清楚,还是挺好实现的...  原生javascript版 jquery版本  大致思路

  • 本文向大家介绍原生JS实现美图瀑布流布局赏析,包括了原生JS实现美图瀑布流布局赏析的使用技巧和注意事项,需要的朋友参考一下 自pinterest网站爆红以来,国内一度掀起“仿PIN”狂潮,诸如花瓣、蘑菇街等等。正是如此,“瀑布流”式布局受到广大网民的青睐。众多知名JS库,也相继出现“瀑布流”布局插件,譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊,我也自己

  • 本文向大家介绍js瀑布流布局的实现,包括了js瀑布流布局的实现的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下 原理: 1、瀑布流布局,要求进行布局的元素等宽,然后计算元素的宽与浏览器的宽度之比,得到需要布置的列数。 2、创建一个数组,长度为列数,数组元素为每一列已布置元素的总高度。(一开始为0)。 3、将未布置的元素,依次布置到

  • 本文向大家介绍使用JS实现图片展示瀑布流效果的实例代码,包括了使用JS实现图片展示瀑布流效果的实例代码的使用技巧和注意事项,需要的朋友参考一下 不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布

  • 本文向大家介绍一行JavaScript代码如何实现瀑布流布局,包括了一行JavaScript代码如何实现瀑布流布局的使用技巧和注意事项,需要的朋友参考一下 写在前面 一行 JavaScript 代码究竟可以完成什么布局?今天我们就来用一行 JavaScript 代码完成经典布局的一种,瀑布流布局。 所谓的瀑布流布局就是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动

  • 本文向大家介绍js实现瀑布流布局(无限加载),包括了js实现瀑布流布局(无限加载)的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下 1.实现瀑布流布局思路 准备好数据之后 . 绑定滚动事件 . 判断页面是否到底(滚动的距离+可是区域的高度 == 最后一个元素的top) . 加载新数据,渲染新页面 .重新执行瀑布流效果 2.代码(更