<html> <head> <meta charset="UTF-8"> <meta name="format-detection" content="telephOne=no"> <meta name="viewport" content="> <meta http-equiv="Expires" content="0"> <meta http-equiv="Cache-Control" content="no-cache"> head> <body> <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>
原创，菜鸟代码，见谅！
简单的两列瀑布流，模拟异步加载
京公网安备 11010802041100号