1： 实现一个瀑布流布局效果
2 : 实现一个新闻瀑布流新闻网站
http://js.jirengu.com/purek/1/edit?html,js
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>18瀑布流布局</title>
<style>
body {
margin: 0;
padding: 0;
}
.content{
position: relative;
}
.item{
position: absolute;
width: 200px;
margin-right: 10px;
margin-top: 10px;
/*transition: all 1s;*/
}
.h1{
height: 200px;
background-color: #f4b300;
}
.h2{
height: 300px;
background-color: #691BB8;
}
.h3{
height: 400px;
background-color: #006ac1;
}
</style>
</head>
<body>
<div class="content">
<div class="item h1">
1
</div>
<div class="item h3">
2
</div>
<div class="item h2">
3
</div>
<div class="item h1">
4
</div>
<div class="item h1">
5
</div>
<div class="item h3">
6
</div>
<div class="item h3">
7
</div>
<div class="item h2">
8
</div>
<div class="item h1">
9
</div>
<div class="item h3">
10
</div>
<div class="item h3">
11
</div>
<div class="item h3">
12
</div>
<div class="item h2">
13
</div>
<div class="item h2">
14
</div>
</div>
<script>
function waterFull(){
var colLength = parseInt($('.content').width() / $('.item').width());
var col = [];
for(var i=0; i<colLength; i++){
col[i] = 0;
}
$('.item').each(function(){
var minVal = Math.min.apply(null,col);
var minIndex = col.indexOf(minVal);
console.log(minVal,minIndex);
$(this).css({
top: minVal,
left: minIndex * $(this).outerWidth(true)
})
col[minIndex] += $(this).outerHeight(true);
})
}
var waterEXE = (function(){
function init(){
waterFull();
$(window).on('resize',function(){
waterFull();
})
}
return {
init: init
};
})()
waterEXE.init();
</script>
</body>
</html>
网友评论