<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流布局</title>
<style type="text/css">
*{padding:0;margin:0;border:none}
body{margin:0; font-family:微软雅黑;} .main{width:1022px;height: auto; margin:0 auto; border:5px solid #000;padding-bottom:100px}#flow-box{margin:10px auto 0 auto; padding:0; position:relative}
#flow-box li{
width:190px; position:absolute; padding:0px; border:solid 0px #efefef; list-style:none;
opacity:0;
-moz-opacity:0;
filter:alpha(opacity=0);
-webkit-transition:opacity 500ms ease-in-out;
-moz-transition:opacity 500ms ease-in-out;
-o-transition:opaicty 500ms ease-in-out;
transition:opaicty 500ms ease-in-out;
border:1px solid #999 }
#flow-box li a img{width:192px}
.loadwrap{position:absolute; left:0; width:100%; text-align:center;}
</style>
</head>
<body>
<div class="main">
<ul id="flow-box">
<li><br />1<br /><br /><br /><br /><p>图片标题1</p></li>
<li><br />1<br /><br /><br /><br /><p>图片标题1</p></li>
<li><br />1<br /><br /><br /><p>图片标题1</p></li>
<li><br />1<br /><br /><br /><br /><p>图片标题1</p></li>
<li><br />1<br /><br /><br /><p>图片标题1</p></li>
<li><br />1<br /><br /><br /><br /><p>图片标题1</p></li>
<li><br />1<br /><br /><br /><p>图片标题1</p></li>
<li><br />1<br /><br /><br /><br /><p>图片标题1</p></li>
<li><br />1<br /><br /><br /><p>图片标题1</p></li>
</ul>
</div>
<script type="text/javascript">
function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离
var w = 1022;//计算页面宽度
var ul = document.getElementById("flow-box");
var li = ul.getElementsByTagName("li");
var iw = li[0].offsetWidth + mh;//计算数据块的宽度
var c = Math.floor(w / iw);//计算列数
ul.style.width = iw * c - mh + "px";//设置ul的宽度至适合便可以利用css定义的margin把所有内容居中 var liLen = li.length;
var lenArr = [];
for (var i = 0; i < liLen; i++) {//遍历每一个数据块将高度记入数组
lenArr.push(li[i].offsetHeight);
} var oArr = [];
for (var i = 0; i < c; i++) {//把第一行排放好，并将每一列的高度记入数据oArr
li[i].style.top = "0";
li[i].style.left = iw * i + "px";
li[i].style.opacity = "1";
li[i].style["-moz-opacity"] = "1";
li[i].style["filter"] = "alpha(opacity=100)";
oArr.push(lenArr[i]);
} for (var i = c; i < liLen; i++) {//将其他数据块定位到最短的一列后面，然后再更新该列的高度
var x = _getMinKey(oArr);//获取最短的一列的索引值
li[i].style.top = oArr[x] + mv + "px";
li[i].style.left = iw * x + "px";
li[i].style.opacity = "1";
li[i].style["-moz-opacity"] = "1";
li[i].style["filter"] = "alpha(opacity=100)";
oArr[x] = lenArr[i] + oArr[x] + mv;//更新该列的高度
}
document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//将loading移到下面 function scroll() {//滚动加载数据
var st = oArr[_getMinKey(oArr)];
var scrollTop = document.documentElement.scrollTop > document.body.scrollTop? document.documentElement.scrollTop : document.body.scrollTop;
if (scrollTop >= st - document.documentElement.clientHeight) {
window.onscroll = null;//为防止重复执行，先清除事件
_request(null, "GetList.php", function(data) {//当滚动到达最短的一列的距离时便发送ajax请求新的数据，然后执行回调函数
_addItem(data.d, function() {//追加数据
var liLenNew = li.length;
for(var i = liLen; i < liLenNew; i++) {
lenArr.push(li[i].offsetHeight);
}
for(var i = liLen; i < liLenNew; i++) {
var x = _getMinKey(oArr);
li[i].style.top = oArr[x] + 10 + "px";
li[i].style.left = iw * x + "px";
li[i].style.opacity = "1";
li[i].style["-moz-opacity"] = "1";
li[i].style["filter"] = "alpha(opacity=100)";
oArr[x] = lenArr[i] + oArr[x] + 10;
}
document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//loading向下移位
liLen = liLenNew;
window.onscroll = scroll;//执行完成，恢愎onscroll事件
});
})
}
}
window.onscroll =scroll;
}
//图片加载完成后执行
window.onload = function() {flow(10, 10)};
//改变窗口大小时重新布局
var re;
window.onresize = function() {
clearTimeout(re);
re = setTimeout(function() {flow(10, 10);}, 200);
}
//追加项
function _addItem(arr, callback) {
var _html = "";
var a = 0;
var l = arr.length;
(function loadimg() {
var img = new Image();
img.onload = function() {
a += 1;
if (a == l) {
for (var k in arr) {
var img = new Image();
img.src = arr[k].img;
_html += '<li><img src="' + arr[k].img + '" /><a href="#">' + arr[k].title + '</a></li>';
}
_appendhtml(document.getElementById("flow-box"), _html);
callback();
}
else {
loadimg();
}
}
img.src = arr[a].img;
})()
}
//ajax请求
function _request(reqdata, url, callback) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = eval("(" + xmlhttp.responseText + ")");
callback(data);
}
}
xmlhttp.open("POST", url);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xmlhttp.send(reqdata);
}
//追加html
function _appendhtml(parent, child) {
if (typeof (child) == "string") {
var div = document.createElement("div");
div.innerHTML = child;
var frag = document.createDocumentFragment();
(function() {
if (div.firstChild) {
frag.appendChild(div.firstChild);
arguments.callee();
}
else {
parent.appendChild(frag);
}
})();
}
else {
parent.appendChild(child);
}
}
//获取数字数组的最大值
function _getMaxValue(arr) {
var a = arr[0];
for (var k in arr) {
if (arr[k] > a) {
a = arr[k];
}
}
return a;
}
//获取数字数组最小值的索引
function _getMinKey(arr) {
var a = arr[0];
var b = 0;
for (var k in arr) {
if (arr[k] < a) {
a = arr[k];
b = k;
}
}
return b;
}
</script>
</body>
</html>
犹豫li是绝对定位的，UL不能自适高度。
最终目的是想让main的高度能得到自适，有什么把法吗？
各位大神求解答。。
瀑布流布局
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>
无标题页
</title>
<script src="jquery-1.4.4.min.js" type="text/javascript">
</script>
<style type="text/css">
html, body { margin: 0; padding: 0; background-color: #E9E9E9; } #Bpb
{ width: 998px; margin: auto; border: 1px solid #eeeeee; text-align: center;
} #Bpb_left, #Bpb_Cen, #Bpb_right { float: left; margin: 10px 10px 10px
10px; width: 310px; } .img { width: 286px; height: 100%; } .centen div
{ } .centen { border: 1px solid #D2D2D2; background-color: #FFFFFF; margin-top:
15px; } .nav_top { height: 30px; width: 998px; line-height: 30px; margin:
auto; background-color: #ffffff; }
</style>
</head>
<body onload="Load();">
<div class="nav_top">
</div>
<div id="Bpb">
<div id="Bpb_left">
</div>
<div id="Bpb_Cen">
</div>
<div id="Bpb_right">
</div>
</div>
</body></html>
<script type="text/javascript">
var List = [{
txt: "1",
img: "http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"
},
{
txt: "1",
img: "http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"
},
{
txt: "1",
img: "http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"
},
{
txt: "1",
img: "http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"
},
{
txt: "1",
img: "http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"
},
{
txt: "1",
img: "http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"
},
{
txt: "1",
img: "http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"
},
{
txt: "1",
img: "http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"
},
{
txt: "1",
img: "http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"
},
{
txt: "1",
img: "http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"
},
{
txt: "1",
img: "http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif"
}];
var Type = 1;
function Load() {
for (var i = 0; i < List.length; i++) {
if (Type == 1) {
$("#Bpb_left").append(HTMLText(List[i].txt, List[i].img))
} else if (Type == 2) {
$("#Bpb_Cen").append(HTMLText(List[i].txt, List[i].img))
} else if (Type == 3) {
$("#Bpb_right").append(HTMLText(List[i].txt, List[i].img));
Type = 0
}
Type++
}
}
function HTMLText(Text, src) {
var html1 = "<div class=\"centen\">";
var html2 = "<div><br />";
var html3 = "<img src=\"" + src + "\" class=\"img\" /></div>";
var html4 = "<div style=\"text-align: left; white-space: normal;width:270px; margin:auto; font-size: 13px;padding-top: 10px; line-height: 20px; color: #565656;\">";
var html5 = Text;
var html6 = "</div>";
var html7 = "<div style=\"text-align: right; font-size: 12px; height: 30px; vertical-align: middle;padding-right: 15px; line-height: 30px;border-top-style:dashed; border-top-width:1px; border-top-color:#A2A2A2;margin-top:7px;\">";
var html8 = "<span style=\"color: #2874AF\">转播</span> <span style=\"color: #333333;\">|</span> <span style=\"color: #2874AF\">评论</span> </div></div>";
return html1 + html2 + html3 + html4 + html5 + html6 + html7 + html8
}
</script>
li[i].style.top = "0";
li[i].style.left = iw * i + "px";
li[i].style.opacity = "1";
li[i].style["-moz-opacity"] = "1";
li[i].style["filter"] = "alpha(opacity=100)";
oArr.push(lenArr[i]);
}
for (var i = c; i < liLen; i++) {//将其他数据块定位到最短的一列后面，然后再更新该列的高度
var x = _getMinKey(oArr);//获取最短的一列的索引值
li[i].style.top = oArr[x] + mv + "px";
li[i].style.left = iw * x + "px";
li[i].style.opacity = "1";
li[i].style["-moz-opacity"] = "1";
li[i].style["filter"] = "alpha(opacity=100)";
oArr[x] = lenArr[i] + oArr[x] + mv;//更新该列的高度
}
后面加一行代码：
document.getElementById("flow-box").style.height= _getMaxValue(oArr)+"px";