javascript - 关于使用JS做定位式流动布局的问题，求大神帮帮看一下，谢谢哈
本文介绍了javascript - 关于使用JS做定位式流动布局的问题，求大神帮帮看一下，谢谢哈的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我正在看教程是用JS实现通过定位的方式来使现流动式布局的，我跟据教程写的代码始中不对，求大神帮看一下我哪里写了。谢谢哈。在原教程中，是将获取图片那里改为给生成的DIV加上随机的高度才实现的，用获取图片的方式没有成。想请大神帮看一下，为什么使用获取图片的方式不能实现定位式流动布局呀。谢谢哈。我默认设置了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(odiv_xiaoBox_ge) {
var ch_height = 0000000;
var index = 0;
for(var i = 0; i < odiv_xiaoBox_ge.length; i++) {
var height_a = odiv_xiaoBox_ge[i].offsetHeight;
if(odiv_xiaoBox_ge < ch_height) {
ch_height = height_a;
index = i;
};
};
return index;
};
//
window.onload = function() {
var oDiv = document.getElementById('Box');
var oDiv_xiaoBox = oDiv.getElementsByTagName('div');
var Vw = document.documentElement.clientWidth;
var Vh = document.documentElement.clientHeight;
var oDiv_xiaoBox_width = 280 + 10; //DIV盒子的固定宽度+边距
var oDiv_xiaoBox_num = Math.floor(Vw / oDiv_xiaoBox_width); //Math.floor();向下取整
var k = Vw - oDiv_xiaoBox_width * oDiv_xiaoBox_num; //浏览器的宽度减DIV盒子的宽度剩盒子个数=Box剩作宽度
//alert(k);
/*
function xdf(obj){
obj.className = "xdsss";
}
**/
oDiv.style.width = oDiv_xiaoBox_width * oDiv_xiaoBox_num + "px";//oDiv的总宽度
oDiv.style.background = "darkred";
oDiv.style.margin = "0 auto"; //oDiv盒子居中显示
//初始一个数组/数组对应oDiv_xiaoBox_width的个数
var odiv_xiaoBox_ge = [0, 0, 0, 0];
//循环在oDiv里创建DIV图片容器
for(var i = 1; i < 8; i++) {
var oImg = document.createElement('img');
oImg.src = "img/" + i + ".png";
//
var oDiv_changjian = document.createElement('div');
oDiv_changjian.style.top = odiv_xiaoBox_ge[min_index] + "px";
oDiv_changjian.style.left = min_index * oDiv_xiaoBox_width + "px";
oDiv_changjian.appendChild(oImg);
//得到返回的索引值
var min_index = cherkHerigt(odiv_xiaoBox_ge);
//alert(min_index);
oDiv.appendChild(oDiv_changjian);
}
}
</script>
</head>
<body>
<div id="Box">
</div>
</body>
</html>解决方案
因为浏览器在布局的时候图片还未加载完成，因此是不能撑开div的。要实现瀑布流还是需要设法先获取图片高度。
这篇关于javascript - 关于使用JS做定位式流动布局的问题，求大神帮帮看一下，谢谢哈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
