php做手机端瀑布流,原生js实现移动端瀑布流式代码示例_javascript技巧

￡神魔★判官ぃ 2022-11-19 01:25 145阅读 0赞

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;

\};

php做手机端瀑布流,原生js实现移动端瀑布流式代码示例_javascript技巧

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JavaScript—瀑布流

相关原生瀑布流布局

相关 php做手机端瀑布流,原生js实现移动端瀑布流式代码示例_javascript技巧

相关原生js实现瀑布流

相关 JS原生瀑布流

相关瀑布流布局JavaScript实现

相关 JavaScript实现无限瀑布流

相关 js 原生瀑布流布局，瀑布流布局

相关原生js实现瀑布流！

相关 taro实现小程序端瀑布流