标签：eth back nload 滑动 script scrolltop strong min 获取
<html> <head> <meta charset="UTF-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Cache-Control" content="no-cache"> </head> <body> <!-- 两列瀑布流显示 思路 把每列的高度做比较 步骤 1.先把图片数据异步获取的，setTimeout进行模拟获取。 2.把获取到的图片，先等资源加载完。 3.进行显示一张，递归进行再显示一张（这边应该还可以优化） 4.模拟滚动加载。 --> <div class="left"></div> <div class="right"></div> <style> .left,.right{ width:50%; } .left{ float:left; } .right{ float:right; } p{ overflow: auto; text-align: center; margin: 5px; border-radius: 4px; cursor: pointer; width: 95%; break-inside: avoid; box-sizing: border-box; } img{ width:100%; } </style> <script> /** * 全局变量 * */ var imgs = [ ‘‘, ‘http://img5.duitang.com/uploads/item/201411/07/20141107164412_v284V.jpeg‘, ‘http://wx4.sinaimg.cn/large/006WfoFPly1fq0jo9svnaj30dw0dwdhv.jpg‘, ‘http://img4.duitang.com/uploads/item/201407/14/20140714234214_4w8hR.jpeg‘, ‘http://img3.imgtn.bdimg.com/it/u=3077900768,3740996753&fm=11&gp=0.jpg‘, ‘http://pic2.zhimg.com/v2-f429c56fa194407db5da50259fc117d5_b.jpg‘ ]; var l_height = 0;//左边高度 var r_height = 0;//右边高度 var arr = [];//存储异步数据的内容 var isload = true;//滑动是否加载 //元素标签 var ele_left = document.getElementsByClassName(‘left‘)[0]; var ele_right = document.getElementsByClassName(‘right‘)[0]; /** * 获取1-5随机数 * */ function getRandNum(){ return Math.floor(Math.random()*5+1); } /** * 获取图片数据 * */ function loadMore(){ setTimeout(()=>{ t = 0;//全局变量 for(var i=0;i<10;i++){ arr.push(getRandNum()); } show(); },300); } /** * dom操作显示 * */ function show(){ if(t==10)return isload = true; var img = document.createElement(‘img‘); img.src = imgs[arr[t]]; img.onload = function(p){ t++; var p = document.createElement(‘p‘); p.appendChild(this); if(ele_left.offsetHeight > ele_right.offsetHeight){ ele_right.appendChild(p); }else{ ele_left.appendChild(p); } show(); } } /** * 滑动加载 * */ window.onscroll=function(){ if( isload && ( (document.body.scrollHeight - window.screen.availHeight-document.getElementsByTagName(‘html‘)[0].scrollTop<100 ) || (document.body.scrollHeight - window.screen.availHeight-document.body.scrollTop<100 ) ) ){ isload = false;//正在进行加载.不需要重复加载 loadMore(); } }; //首次执行 (function(){ loadMore(); })(); </script> </body> </html>
原创，菜鸟代码，见谅！
标签：eth back nload 滑动 script scrolltop strong min 获取
原文地址：https://www.cnblogs.com/target-lyl/p/10309347.html
