<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
width: 180px;
}
.container {
margin: 0 auto;
position: relative;
background: #f8f8f8;
padding: 10px;
}
.box {
position: absolute;
}
.box>div {
float: left;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 2px 2px 3px 0 #ccc;
border-radius: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container" id="container"></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var imgs = [
"http://temp.im/180x100/f00",
"http://temp.im/180x200/ff0",
"http://temp.im/180x300/f0f",
"http://temp.im/180x400/00f",
"http://temp.im/180x200/0ff",
"http://temp.im/180x300/0f0",
"http://temp.im/180x100/f66",
"http://temp.im/180x600/66f",
"http://temp.im/180x200/636",
"http://temp.im/180x300/ef3",
"http://temp.im/180x100/f00",
"http://temp.im/180x200/ff0",
"http://temp.im/180x300/f0f",
"http://temp.im/180x400/00f",
"http://temp.im/180x200/0ff",
"http://temp.im/180x300/0f0",
"http://temp.im/180x100/f66",
"http://temp.im/180x600/66f",
"http://temp.im/180x200/636",
"http://temp.im/180x300/ef3",
"http://temp.im/180x100/f00",
"http://temp.im/180x200/ff0",
"http://temp.im/180x300/f0f",
"http://temp.im/180x400/00f",
"http://temp.im/180x200/0ff",
"http://temp.im/180x300/0f0",
"http://temp.im/180x100/f66",
"http://temp.im/180x600/66f",
"http://temp.im/180x200/636",
"http://temp.im/180x300/ef3"
];
var $con = $("#container");
var lefts = []; //保存每組的left
var tops = []; //保存高度
var imgID = 0; //圖片id
var cols; //組數
var timer;
$.each(imgs, function() {
var $img = $("<div class='box'><div><img src='" + this + "' /></div></div>")
$img.appendTo($con);
setTimeout(function() {
waterFall(222)
}, 200)
});
$(window).resize(function() {
setTimeout(function() {
waterFall(222)
}, 200)
})
function waterFall(imgWidth) {
lefts = [];
tops = [];
var viewWidth = document.documentElement.clientWidth || window.innerWidth
cols = Math.floor(viewWidth / imgWidth);
$con.width(cols * imgWidth)
for(var i = 0; i < cols; i++) {
lefts.push(imgWidth * i);
tops.push(0);
};
//console.log(lefts)
$(".box").each(function() {
//console.log(getTop($(this).outerHeight()))
var pos = getPos($(this).outerHeight());
$con.height(Math.max.apply(null, tops));
$con.height();
$(this).css({
left: pos.left,
top: pos.top
})
})
}
function getPos(height) {
var pos = {};
var minTop = Math.min.apply(null, tops);
var minIndex = getIndex(minTop);
tops[minIndex] = minTop + height;
//console.log(minTop,tops)
pos.top = minTop;
pos.left = lefts[minIndex];
//console.log(pos)
return pos;
}
//獲取tops最小下標
function getIndex(m) {
for(var i in tops) {
if(tops[i] == m) {
//console.log(i)
return i
}
}
}
</script>
</html>手寫簡單瀑布流
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章