原生js實(shí)現(xiàn)移動(dòng)端瀑布流式代碼示例
瀑布流布局已成為當(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有所幫助。
- js實(shí)現(xiàn)瀑布流的三種方式比較
- 原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
- js實(shí)現(xiàn)瀑布流的一種簡(jiǎn)單方法實(shí)例分享
- 解析瀑布流布局:JS+絕對(duì)定位的實(shí)現(xiàn)
- 純js實(shí)現(xiàn)瀑布流展現(xiàn)照片(自動(dòng)適應(yīng)窗口大小)
- javascript自適應(yīng)寬度的瀑布流實(shí)現(xiàn)思路
- js實(shí)現(xiàn)的美女瀑布流效果代碼
- 純js實(shí)現(xiàn)瀑布流布局及ajax動(dòng)態(tài)新增數(shù)據(jù)
- javascript瀑布流式圖片懶加載實(shí)例
- JS原生瀑布流效果實(shí)現(xiàn)
相關(guān)文章
JS實(shí)現(xiàn)固定在右下角可展開(kāi)收縮DIV層的方法
這篇文章主要介紹了JS實(shí)現(xiàn)固定在右下角可展開(kāi)收縮DIV層的方法,右下角的div層可實(shí)現(xiàn)收縮與展開(kāi)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02微信小程序自定義組件實(shí)現(xiàn)tabs選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義組件實(shí)現(xiàn)tabs選項(xiàng)卡功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07JS實(shí)現(xiàn)重新加載當(dāng)前頁(yè)面
本文主要介紹用JavaScript刷新上級(jí)頁(yè)面和當(dāng)前頁(yè)面。附上具體實(shí)例代碼。需要的朋友可以參考下2016-11-11JavaScript統(tǒng)計(jì)數(shù)組中相同的數(shù)量的方法總結(jié)
在JavaScript中,我們經(jīng)常需要對(duì)數(shù)組中對(duì)象的屬性進(jìn)行統(tǒng)計(jì)。在本文中,我們將介紹如何使用JavaScript來(lái)實(shí)現(xiàn)這一功能,文中有詳細(xì)的代碼示例,需要的朋友可以借鑒參考2023-05-05JS Generator 函數(shù)的含義與用法實(shí)例總結(jié)
這篇文章主要介紹了JS Generator 函數(shù)的含義與用法,結(jié)合實(shí)例形式總結(jié)分析了JS Generator 函數(shù)基本含義、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04解決Webpack 熱部署檢測(cè)不到文件變化的問(wèn)題
下面小編就為大家分享一篇解決Webpack 熱部署檢測(cè)不到文件變化的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02