<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>