实现瀑布流式布局
实现瀑布流排版
效果:
Html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo water-basic</title>
<style type="text/css">
.water-basic {
position: relative;
}
.item {
position: absolute;
width: 200px;
margin: 5px;
transition: all 1s;
}
.box1 {
height: 500px;
background-color: red;
}
.box2 {
height: 300px;
background-color: blue;
}
.box3 {
height: 200px;
background-color: gray;
}
.box4 {
height: 700px;
background-color: pink;
}
.box5 {
height: 600px;
background-color: yellow;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="water-basic">
<div class="item box1">1</div>
<div class="item box2">2</div>
<div class="item box1">3</div>
<div class="item box4">4</div>
<div class="item box5">5</div>
<div class="item box3">6</div>
<div class="item box2">7</div>
<div class="item box1">8</div>
<div class="item box1">9</div>
<div class="item box2">10</div>
<div class="item box4">11</div>
<div class="item box3">12</div>
<div class="item box1">13</div>
<div class="item box5">14</div>
<div class="item box2">15</div>
<div class="item box1">16</div>
<div class="item box3">17</div>
<div class="item box1">18</div>
<div class="item box2">19</div>
<div class="item box1">20</div>
<div class="item box4">21</div>
<div class="item box5">22</div>
<div class="item box3">23</div>
<div class="item box2">24</div>
<div class="item box1">25</div>
<div class="item box1">26</div>
<div class="item box2">27</div>
<div class="item box4">28</div>
<div class="item box3">29</div>
<div class="item box1">30</div>
<div class="item box5">31</div>
<div class="item box2">32</div>
<div class="item box1">33</div>
<div class="item box3">34</div>
</div>
<script type="text/javascript">
var waterBasic = (function(){
function init(){
var nodeWidth = $(".item").outerWidth(true),
colNum = parseInt( $(window).width() / nodeWidth ),
colSumHeight = [];
for (var i=0;i<colNum;i++) {
colSumHeight.push(0);
}
$(".item").each(function(){
var $cur = $(this),
idx = 0,
minSumHeight = colSumHeight[0];
// 获取到solSumHeight中的最小高度
for (var i=0;i<colSumHeight.length;i++) {
if (minSumHeight > colSumHeight[i]) {
minSumHeight = colSumHeight[i];
idx = i;
}
}
// 设置各个item的css属性
$cur.css({
left: nodeWidth*idx,
top: minSumHeight
})
// 更新solSumHeight
colSumHeight[idx] = colSumHeight[idx] + $cur.outerHeight(true);
})
}
// 设置窗口改变时也能重新加载
$(window).on("resize", function(){
init();
})
return {
init: init
}
})();
waterBasic.init();
</script>
</body>
</html>
