wf_js.html（展示页）
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
background: #f3f2f3;
}
#main {
border: 1px solid red;
width: 1225px;
margin: 0 auto;
}
.column {
width: 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="ajax.js"></script>
<script type="text/javascript">
//点击按钮 首先加载数据到不同的列上
var cols = document.getElementsByClassName("column");
btn.onclick = function(){
ajax( "pbl.json" , function(msg){
var arr = JSON.parse( msg );
for( var i = 0 ; i < arr.length ; i++ ){
var pro = arr[i];
var oimg = document.createElement("img");
oimg.src = pro.src;
//设置图片的宽度和高度
oimg.width = "245";
oimg.height = pro.height;
//获取最小高度列的索引
var index = getMinHeightIndex();
cols[index].appendChild( oimg );
}
} )
} ///定义一个函数 功能是获取最小高度列的下标
function getMinHeightIndex(){
//假设五列中第一列的高度是最小的
var minHeight = cols[0].offsetHeight;
var index = 0;//第一列的下标
for( var i = 0 ; i < cols.length ; i++ ){
if( minHeight > cols[i].offsetHeight ){
minHeight = cols[i].offsetHeight;
index = i;
}
}
return index;
} window.onscroll = function(){
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
//当最小高度列高 < 可视窗口高度+页面滚走的距离 时 开始加载数据
var winHeight = window.innerHeight;
var minHeight = cols[getMinHeightIndex()].offsetHeight;
if( minHeight < winHeight + sTop ){
btn.onclick();//持续加载图片
}
}
</script>
ajax.js
function ajax(url,fnWin,fnFaild){
var ajax = null;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}else{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
ajax.open("get",url,true);
ajax.send();
ajax.onreadystatechange = function (){
if (ajax.readyState==4) {
if(ajax.status == 200){
if (fnWin) { //判断该函数是否存在，如果存在，就调用 返回结果
fnWin(ajax.responseText);
}
}else{
if (fnFaild){
fnFaild();
}
}
}
}
}
pbl.json
[
{"src":"img/1.jpg","alt":"1","height":"343"},
{"src":"img/2.jpg","alt":"2","height":"300"},
{"src":"img/3.jpg","alt":"3","height":"230"},
{"src":"img/4.jpg","alt":"4","height":"230"},
{"src":"img/5.jpg","alt":"5","height":"306"},
{"src":"img/6.jpg","alt":"6","height":"333"},
{"src":"img/7.jpg","alt":"7","height":"335"},
{"src":"img/8.jpg","alt":"8","height":"172"},
{"src":"img/9.jpg","alt":"9","height":"172"},
{"src":"img/10.jpg","alt":"10","height":"345"},
{"src":"img/11.jpg","alt":"11","height":"340"},
{"src":"img/12.jpg","alt":"12","height":"153"},
{"src":"img/13.jpg","alt":"13","height":"345"},
{"src":"img/14.jpg","alt":"14","height":"316"},
{"src":"img/15.jpg","alt":"15","height":"327"},
{"src":"img/16.jpg","alt":"16","height":"345"},
{"src":"img/17.jpg","alt":"17","height":"172"},
{"src":"img/18.jpg","alt":"18","height":"282"},
{"src":"img/19.jpg","alt":"19","height":"224"},
{"src":"img/11.jpg","alt":"11","height":"340"},
{"src":"img/12.jpg","alt":"12","height":"153"},
{"src":"img/13.jpg","alt":"13","height":"345"},
{"src":"img/14.jpg","alt":"14","height":"316"},
{"src":"img/15.jpg","alt":"15","height":"327"},
{"src":"img/16.jpg","alt":"16","height":"345"},
{"src":"img/17.jpg","alt":"17","height":"172"},
{"src":"img/18.jpg","alt":"18","height":"282"},
{"src":"img/19.jpg","alt":"19","height":"224"},
{"src":"img/20.jpg","alt":"20","height":"344"}
]