实现思路：
关键点：利用浮动元素变为行内块元素，能自动换行的特点。自动获取每一个子项 的div的高度。
本例中图片编号001-019 所以在代码中进行了随机处理；
注意点：如果不是在事件中定义，需要在window.onload中定义，如果不定义，应为获取高度时，图片还没有加载完成，所以获取的数值会报错；
1.设置子项的宽度的和不超过父元素；
2.设置图片的样式后宽度刚好等于包含他的子项的宽度；
3.判断子项是否列数是否已经达到父元素可支持的横向子元素个数（一排）；
4.没有达到3中所说条件，在父项中创建子项；
5.达到3中的条件，获取所有自相的高度，在高度最小的子项中添加新的图片；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 1000px;
margin:0 auto;
font-size: 0px;
overflow: hidden;
}
.item {
width: 200px;
float: left;
}
.item img{
padding:2px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="box">
<div class = "item"><img src="./images/p_000.jpg" alt=""></div>
<div class = "item"><img src="./images/p_001.jpg" alt=""></div>
<div class = "item"><img src="./images/p_002.jpg" alt=""></div>
<div class = "item"><img src="./images/p_003.jpg" alt=""></div>
<div class = "item"><img src="./images/p_004.jpg" alt=""></div>
<script>
window.onclick = function() {
var $se = function(ele){
return document.getElementById(ele);
}
var box = $se("box");
var items = document.getElementsByClassName("item");
var item0 = box.children[0];
var col = Math.floor(box.offsetWidth/item0.offsetWidth);
console.log(col);
var arr = [];
waterFull();
function waterFull(){
console.log(".................");
var imgname = Math.round(Math.random()*18+1);
if(imgname<10){
imgname = "0"+ imgname;
}
console.log(imgname);
if(items.length<col){
box.innerHTML += '<div class = "item"><img src="./images/p_0'+imgname+'.jpg" alt=""></div>';
}else{
for(var i = 0; i<items.length;i++){
var offsetHeight = items[i].offsetHeight;
arr.push(offsetHeight);
}
var minHight = arr[0];
var minIndex = 0;
for(var j = 1; j<arr.length;j++){
if(arr[j]<minHight){
minHight = arr[j];
minIndex = j;
}
}
items[minIndex].innerHTML += '<img src="./images/p_0'+imgname+'.jpg" alt="">';
}
arr = [];
}
}
</script>
</body>
</html>
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
