瀑布流布局基本思路
2017-01-04 本文已影响0人
书中有凉气
主要思路如下
1.计算页面的宽度，计算出页面可放数据块的列数。
2.将各个数据块的高度尺寸记入数组中
3.用绝对定位先将页面第一行填满，因为第一行的top位置都是一样的，然后用数组记录每一列的总高度。
4.继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。
5.当浏览器窗口大小改变时，重新执行一次上面1-4步以重新排放（列数随页面宽度而改变，因而需要重新排放）。
6.滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。
预览：
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu30.html
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>renwu30</title>
<script src='//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<style>
.water{
width: 300px;
margin: 5px;
position: absolute;
transition: all 1s;
}
.blue{
background-color: blue;
height: 300px;
}
.green{
background-color: green;
height: 400px;
}
.grey{
background-color: grey;
height: 700px;
}
.red{
background-color: red;
height: 450px;
}
.yellow{
background-color: yellow;
height: 250px;
}
</style>
</head>
<body>
<div class="water yellow"></div>
<div class="water blue"></div>
<div class="water grey"></div>
<div class="water yellow"></div>
<div class="water green"></div>
<div class="water red"></div>
<div class="water blue"></div>
<div class="water yellow"></div>
<div class="water red"></div>
<div class="water yellow"></div>
<div class="water red"></div>
<div class="water green"></div>
<div class="water blue"></div>
<div class="water grey"></div>
<div class="water blue"></div>
<div class="water yellow"></div>
<div class="water blue"></div>
<div class="water green"></div>
<div class="water red"></div>
<div class="water green"></div>
</body>
<script>
var zhangxuan=(function(){
function init(f, s){ //传入参数f:父容器，s:瀑布节点
var $nodeW=s.outerWidth(true),
$winW=f.width(),
$nodeNum=parseInt($winW/$nodeW),
nodesSumHeight=[];
for(var i=0;i<$nodeNum;i++){
nodesSumHeight.push(0);
}
s.each(function(){ //这边是遍历所选节点，注意内部修改节点css需要用this
var $el=$(this),
$nodeH=$el.outerHeight(true),
temp=getmin(nodesSumHeight);
$el.css({
left:$nodeW*temp.idx,
top:temp.min
})
nodesSumHeight[temp.idx]+= $nodeH //把this的高度加入数组中
})
}
function getmin(arr){ //用来node高度数组中return最小值和下标
var idx=0,
minSumHeight=arr[0];
for(var i=0;i<arr.length;i++){
if(arr[i]< minSumHeight){
idx=i;
minSumHeight= arr[i];
}
}
return{idx:idx, min:minSumHeight}
}
$(window).on('resize', function(){
init($(window), $('.water'))
})
return {
init:init
}
})()
zhangxuan.init($(window), $('.water'));
</script>
</html>
