<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流案例</title>
<link rel="stylesheet" href="../css/initialize.css">
<script src="../js/beixiAjaxBaseUtil.js"></script>
<style>
.out{
position: relative;margin: 0 auto;
}
.in{
float: left;
}
img{margin: 10px;
border: 1px solid lightgray;padding: 10px;
border-radius: 15px;
box-shadow: 0px 0px 5px orange;
}
</style>
</head>
<body>
<div class="out"></div>
<script>
window.beixiAjax({
type:"get",
url:'http://localhost:8088/test/test1.do',
success:function(res){
var dataArr = res;
//准备页面元素
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);
console.log(indivs[0].offsetWidth);
outDiv.style.width=num*indivs[0].offsetWidth+'px';
var heightArr=[];
//存放第一行图片的高度
//所有的div除了第一行,都要定位
for(var i=0;i<indivs.length;i++){
if(i<num){
//第一行
heightArr.push(indivs[i].offsetHeight);
// console.log(indivs[0].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;
}
}
}
}
});
//这个数组模拟ajax请求来的后台数据
// var 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'];
//构建瀑布流
// window.onload=function(){
// }
</script>
</body>
</html>


单独跑可以跑通,放服务器上,图片的宽度一直返回42,拿了老师的代码 结果也是一样