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"}
]