原生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的瀑布流插件Macy.js
• 原生js实现瀑布流布局
• 瀑布流的实现方式（原生js+jquery+css3）
• 原生JS实现美图瀑布流布局赏析
• 原生JS实现响应式瀑布流布局
• 原生JS实现瀑布流插件