原生js实现移动端瀑布流式代码示例
瀑布流布局已成为当今非常普遍的图片展示方式，无论是PC还是手机等移动设备上。最近使用到了“懒加载”，现在更新一般，因为平时主要使移动端的开发所以库文件使用的是zepto.js。当然也可以和jQuery通用。
代码如下：
functionloadImgLazy(node){
varlazyNode=$('[node-type=imglazy]',node),
mobileHeight,lazyOffSetHeight,tempHeight,currentNodeTop,imgObject,
imgDataSrc,localUrl;
localUrl=location.href;
//获取当前浏览器可视区域的高度
mobileHeight=$(window).height();
returnfunction(co){
varconf={
'loadfirst':true,
'loadimg':true
};
for(variteminconf){
if(iteminco){
conf.item=co.item;
}
}
varthat={};
var_this={};
/**
*[replaceImgSrc动态替换节点中的src]
*@param{[type]}tempObject[description]
*@return{[type]}[description]
*/
_this.replaceImgSrc=function(tempObject){
varsrcValue;
$.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(){
varimgLazyList=$('[node-type=imglazy]',node);
for(vari=0;i<5;i++){
_this.replaceImgSrc(imgLazyList.eq(i));
}
});
}
};
that={
replaceImgSrc:_this.replaceImgSrc(),
mobileHeight:mobileHeight,
objIsEmpty:function(obj){
for(variteminobj){
returnfalse;
}
returntrue;
},
destory:function(){
if(_this){
$.each(_this,function(i,item){
if(item&&item.destory){
item.destory();
}
});
_this=null;
}
$(window).off('scroll');
}
};
returnthat;
};
}
以上所述就是本文给大家分享的全部内容了，希望能够对大家熟练使用javascript有所帮助。