先看效果：
初始状态：
瀑布流效果：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>瀑布流</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
#container
{
position: relative;
}
.box
{
padding: 5px;
float: left;
}
.box_img
{
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.box_img img
{
width: 200px;
height: auto;
}
</style>
<script type="text/javascript">
// 先固定整个屏幕的宽度 即每行的个数
window.onload = function () {
imgLocation("container", "box");
};
function imgLocation(parent, content) {
//将parent下多有的content全部取出
var cparent = document.getElementById(parent);
var ccontent = getChildElement(parent, content);
//每个图片的宽度
var imgWidth = ccontent[0].offsetWidth;
//每行图片的个数
var num = Math.floor(document.documentElement.clientWidth / imgWidth);
//改变container的样式
cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0px auto";
var BoxHeightArr = [];
for (var i = 0; i < ccontent.length; i++) {
if (i < num)
BoxHeightArr[i] = ccontent[i].offsetHeight;
else {
var minheight = Math.min.apply(null, BoxHeightArr);
// console.warn(minheight);
var minindex = getminheightLocation(BoxHeightArr, minheight);
console.warn(minindex);
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minheight + "px";
//这里的
ccontent[i].style.left = ccontent[minindex].offsetLeft + "px";
BoxHeightArr[minindex] = BoxHeightArr[minindex] + ccontent[i].offsetHeight;
}
}
}
//获得最小高度的位置
function getminheightLocation(BoxHeightArr, minHeight) {
for (var i = 0; i < BoxHeightArr.length; i++)
// for (var i in BoxHeightArr)
{
if (BoxHeightArr[i] == minHeight) {
return i;
}
}
}
function getChildElement(parent, content) {
var contentArr = [];
var allcontent = document.getElementsByTagName("*");
for (var i = 0; i < allcontent.length; i++) {
if (allcontent[i].className == content)
contentArr.push(allcontent[i]);
}
return contentArr;
}
</script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img">
<img src="img/1 (1).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (2).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (3).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (4).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (5).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (6).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (7).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (8).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (9).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (10).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (11).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (12).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (13).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (14).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (15).jpg" />
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/1 (16).jpg" />
</div>
</div>
</div>
</body>
</html>
时间： 2024-10-29 03:11:01