我正在看教程是用JS实现通过定位的方式来使现流动式布局的，我跟据教程写的代码始中不对，求大神帮看一下我哪里写了。谢谢哈。在原教程中，是将获取图片那里改为给生成的p加上随机的高度才实现的，用获取图片的方式没有成。想请大神帮看一下，为什么使用获取图片的方式不能实现定位式流动布局呀。谢谢哈。我默认设置了8张宽度相同，高度不图的图片。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>00015定位式流动布局</title>
<style>
* {
padding: 0px;
margin: 0px;
}
#Box {
height: 500px;
position: relative;
}
.xdsss {
margin-top: 10px;
}
</style>
<script>
//获取最小索引值
function cherkHerigt(op_xiaoBox_ge) {
var ch_height = 0000000;
var index = 0;
for(var i = 0; i < op_xiaoBox_ge.length; i++) {
var height_a = op_xiaoBox_ge[i].offsetHeight;
if(op_xiaoBox_ge < ch_height) {
ch_height = height_a;
index = i;
};
};
return index;
};
//
window.onload = function() {
var op = document.getElementById('Box');
var op_xiaoBox = op.getElementsByTagName('p');
var Vw = document.documentElement.clientWidth;
var Vh = document.documentElement.clientHeight;
var op_xiaoBox_width = 280 + 10; //p盒子的固定宽度+边距
var op_xiaoBox_num = Math.floor(Vw / op_xiaoBox_width); //Math.floor();向下取整
var k = Vw - op_xiaoBox_width * op_xiaoBox_num; //浏览器的宽度减p盒子的宽度剩盒子个数=Box剩作宽度
//alert(k);
/*
function xdf(obj){
obj.className = "xdsss";
}
**/
op.style.width = op_xiaoBox_width * op_xiaoBox_num + "px";//op的总宽度
op.style.background = "darkred";
op.style.margin = "0 auto"; //op盒子居中显示
//初始一个数组/数组对应op_xiaoBox_width的个数
var op_xiaoBox_ge = [0, 0, 0, 0];
//循环在op里创建p图片容器
for(var i = 1; i < 8; i++) {
var oImg = document.createElement('img');
oImg.src = "img/" + i + ".png";
//
var op_changjian = document.createElement('p');
op_changjian.style.top = op_xiaoBox_ge[min_index] + "px";
op_changjian.style.left = min_index * op_xiaoBox_width + "px";
op_changjian.appendChild(oImg);
//得到返回的索引值
var min_index = cherkHerigt(op_xiaoBox_ge);
//alert(min_index);
op.appendChild(op_changjian);
}
}
</script>
</head>
<body>
<p id="Box">
</p>
</body>
</html>
因为浏览器在布局的时候图片还未加载完成，因此是不能撑开p的。要实现瀑布流还是需要设法先获取图片高度。