欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js實(shí)現(xiàn)移動(dòng)端瀑布流式代碼示例

 更新時(shí)間:2015年12月18日 10:15:26   作者:zhiqiang21  
這篇文章主要為大家分享了原生js實(shí)現(xiàn)移動(dòng)端瀑布流式代碼示例,對(duì)瀑布流布局感興趣的小伙伴們可以參考一下

瀑布流布局已成為當(dāng)今非常普遍的圖片展示方式,無(wú)論是PC還是手機(jī)等移動(dòng)設(shè)備上。最近使用到了“懶加載”,現(xiàn)在更新一般,因?yàn)槠綍r(shí)主要使移動(dòng)端的開(kāi)發(fā)所以庫(kù)文件使用的是zepto.js 。當(dāng)然也可以和jQuery 通用。
代碼如下:

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

 localUrl = location.href;
 // 獲取當(dāng)前瀏覽器可視區(qū)域的高度
 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 動(dòng)態(tài)替換節(jié)點(diǎn)中的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');
      }
     }
    });
   });
  };

  /**
   * 首屏判斷屏幕上是否出現(xiàn)imglazy節(jié)點(diǎn),有的話就加載圖片
   * @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));
     }
    });
   }
  };

  //當(dāng)加載過(guò)首屏以后按照隊(duì)列加載圖片
  _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;
 };
}

以上所述就是本文給大家分享的全部?jī)?nèi)容了,希望能夠?qū)Υ蠹沂炀毷褂胘avascript有所幫助。

相關(guān)文章

最新評(píng)論