<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>瀑布流布局</title>
<style type="text/css">
body {
margin: 0;
font-family: 微软雅黑;
}
#flow-box {
margin: 10px auto 0 auto;
padding: 0;
position: relative
}
#flow-box li {
width: 190px;
position: absolute;
padding: 10px;
border: solid 1px #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;
}
#flow-box li img {
width: 100%;
}
#flow-box li a {
display: block;
width: 100%;
text-align: center;
font-size: 14px;
color: #333;
line-height: 18px;
margin-top: 10px;
text-decoration: none;
}
.loadwrap {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<ul id="flow-box">
<li>
<img src="http://files.jb51.net/file_images/article/201211/960bda11tw1dnw504ga3vj.jpg" /><a href="javascript:;">图片标题1</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/771f735ctw1dnw5gv6dmcj.jpg" /><a href="javascript:;">图片标题2</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/5d5e9605gw1dnw4o6uk3gj.jpg" /><a href="javascript:;">图片标题3</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/6d9cb0b8jw1dnw5m0y5yrj.jpg" /><a href="javascript:;">图片标题4</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/62dae985gw1dnzc4mwvm5j.jpg" /><a href="javascript:;">图片标题5</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/8d95fb4cgw1dnzec2c6cdj.jpg" /><a href="javascript:;">图片标题6</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/872bccc8jw1dnzch2aqtkj.jpg" /><a href="javascript:;">图片标题7</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/5b104465tw1dnzdlozp6tj.jpg" /><a href="javascript:;">图片标题8</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/6de170f6jw1dnzl7jbzidj.jpg" /><a href="javascript:;">图片标题9</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/6a93dbfbgw1dnzeiu1draj.jpg" /><a href="javascript:;">图片标题10</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/6ea59a74jw1dnzm0wbf7vj.jpg" /><a href="javascript:;">图片标题11</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/48bf076ejw1dnzexjhl6dj.jpg" /><a href="javascript:;">图片标题12</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/6da7993fjw1dnvsnesrutj.jpg" /><a href="javascript:;">图片标题13</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/75914d3fgw1dnzlgn33njj.jpg" /><a href="javascript:;">图片标题14</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/6a8dea72gw1dnzlwnfju0j.jpg" /><a href="javascript:;">图片标题15</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/696387aagw1dnzqd829yyj.jpg" /><a href="javascript:;">图片标题16</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/6da7993fjw1dnvsnesrutj.jpg" /><a href="javascript:;">图片标题17</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/6de170f6jw1dnzl7jbzidj.jpg" /><a href="javascript:;">图片标题18</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/6ea59a74jw1dnzm0wbf7vj.jpg" /><a href="javascript:;">图片标题19</a>
</li>
<li>
<img src="http://files.jb51.net/file_images/article/201211/696387aagw1dnzqd829yyj.jpg" /><a href="javascript:;">图片标题20</a>
</li>
</ul>
<div id="loadimg" class="loadwrap">
<img src="http://files.jb51.net/file_images/article/201211/200803131036175436.gif" />
</div>
</body>
<script type="text/javascript">
var data =[{"img":"http://files.jb51.net/file_images/article/201211/960bda11tw1dnw504ga3vj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/771f735ctw1dnw5gv6dmcj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/5d5e9605gw1dnw4o6uk3gj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/6d9cb0b8jw1dnw5m0y5yrj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/62dae985gw1dnzc4mwvm5j.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/8d95fb4cgw1dnzec2c6cdj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/872bccc8jw1dnzch2aqtkj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/5b104465tw1dnzdlozp6tj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/6de170f6jw1dnzl7jbzidj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/6a93dbfbgw1dnzeiu1draj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/6ea59a74jw1dnzm0wbf7vj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/48bf076ejw1dnzexjhl6dj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/6da7993fjw1dnvsnesrutj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/75914d3fgw1dnzlgn33njj.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/6a8dea72gw1dnzlwnfju0j.jpg","title":"a"},
{"img":"http://files.jb51.net/file_images/article/201211/696387aagw1dnzqd829yyj.jpg","title":"a"}];
function flow(mh, mv) { //参数mh和mv是定义数据块之间的间距,mh是水平距离,mv是垂直距离
var w = document.documentElement.offsetWidth; //计算页面宽度
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, 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>
</html>
js 瀑布流
最新推荐文章于 2019-05-22 16:02:40 发布