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"}]瀑布流之ajax
原文地址：https://www.cnblogs.com/Leslie-Cheung1584304774/p/10529484.html