Reception:
<!DOCTYPE html>
<html>
<head >
<meta charset='utf-8'/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/initial.css">
<style>
.out{ position: relative; margin: 0 auto; }
.in{ float: left; }
img{
margin: 10px;
padding: 10px;
border: 1px solid lightgray;
border-radius: 15px;
box-shadow: 0px 0px 5px orange;
}
</style>
</head>
<body>
<div class="out"></div>
<script src="myajax.js"></script>
<script>
window.onload = function (){
//等到页面彻底加载完毕后，在发送ajax请求
window.myajax({
type:'get',
url:'6.php',
success:function (res){
var dataArr = res.info;
//当数据请求完毕后，开始处理页面
var outDiv = document.querySelector('.out');
for(var i=0; i<dataArr.length; i++){
var div = document.createElement('div');
div.className = 'in';
div.innerHTML = '<img src="'+dataArr[i]+'">';
outDiv.appendChild(div);
}
//准备构建瀑布流的必要信息
var inDivs = document.querySelectorAll('.in');
var num = Math.floor(document.documentElement.clientWidth/inDivs[0].offsetWidth);
outDiv.style.width = num*inDivs[0].offsetWidth+'px';
var heightArr = [];
//构建瀑布流
for(var i=0; i<inDivs.length; i++){
if(i<num){
heightArr.push(inDivs[i].offsetHeight);
}else{
inDivs[i].style.position = 'absolute';
minHeight = Math.min.apply(null, heightArr);
minIndex = heightArr.indexOf(minHeight);
inDivs[i].style.top = minHeight+'px';
inDivs[i].style.left = inDivs[minIndex].offsetLeft+'px';
heightArr[minIndex] += inDivs[i].offsetHeight;
}
}
}
});
};
</script>
</body>
</html>
Backstage:
<?php
$dataArr = ['img/i1.jpg','img/i2.jpg','img/i3.jpg','img/i4.jpg','img/i5.jpg','img/i6.jpg','img/i7.jpg','img/i8.jpg','img/i9.jpg','img/i10.jpg','img/i11.jpg','img/i12.jpg','img/i13.jpg','img/i14.jpg','img/i15.jpg'];
$success=array("mes"=>'ok','info'=>$dataArr);
echo json_encode($success);
?>
