<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
100%;
height: 100%;
background: #f3f2f3;
}
#main {
border: 1px solid red;
1225px;
margin: 0 auto;
}
.column {
245px;
float: left;
}
</style>
</head>
<body>
<button id="btn">加载图片</button>
<div id="main">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</body>
</html>
<script src="../../public.js"></script>
<script src="../ajax.js"></script>
<script type="text/javascript">
var cols = document.getElementsByClassName("column");
var oBtn = document.querySelector( "#btn" );
oBtn.onclick = function(){
var pro = ajaxPromise("pbl.json");
pro.then( function(msg){
var arr = JSON.parse( msg );
for( var i = 0 ; i < arr.length ; i++ ){
var oImg = document.createElement("img");
oImg.src = arr[i].src;
oImg.width = "245";
oImg.height = arr[i].height;
var index =getMinHeightIndex();//获取五列中最小高度列的下标
cols[index].appendChild( oImg );
console.log( index );
}
},function(){
alert("加载失败");
} )
}
//定义一个功能 获取高度最小的列的下标
function getMinHeightIndex(){
//假设第一列是最小高度列
var minHeight = cols[0].offsetHeight;
var minHeightIndex = 0;//假设的下标
//遍历五个列 找最小高度
for( var i = 0 ; i < cols.length ; i++ ){
if( cols[i].offsetHeight < minHeight ){
minHeight = cols[i].offsetHeight;
minHeightIndex = i;
}
}
return minHeightIndex;
}
//触发滚动条时 最小高度的底部进入到可视区时 开始加载图片
window.onscroll = function(){
var wHeight = window.innerHeight;
var sTop = document.documentElement.scrollTop||document.body.scrollTop;
//获取最小列高
var index = getMinHeightIndex();//最小高度索引
var minHeight = cols[index].offsetHeight;
if( wHeight+sTop > minHeight ){
//开始加载图片
oBtn.onclick();
}
}
</script>