一、瀑布流的布局原理是什么？
1.计算出浏览器可以横向排列元素的个数（元素的宽度都是相同的）：浏览器的宽度/元素的宽度；如果元素有内外边距和边框，可以通过outerWidth(true)获取。排列元素使用绝对定位position:absolute，其父元素使用相对定位position:reletive。
2.定义一个用于存放元素高度和的数组，遍历该数组找到数组中最小高度的元素，根据该元素的下标计算出top和left值。然后使用jQuery的css ()方法把下一行第一个元素放到该最小高度元素的下面。
3.重新定义数组的高度，并遍历，放置元素。
4.示范代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#ct{
position: relative;
}
#ct:after{
content: "";
display: block;
clear: both;
}
.item{
/*position: absolute;*/
width: 200px;
margin-right: 10px;
margin-top: 10px;
transition: all 1s;
float: left;
}
.wrap1{
background: pink;
height: 320px;
}
.wrap2{
background: green;
height: 200px;
}
.wrap3{
background: blue;
height: 380px;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
<div id="ct">
<div class="item wrap1">1</div>
<div class="item wrap2">2</div>
<div class="item wrap3">3</div>
<div class="item wrap2">4</div>
<div class="item wrap1">5</div>
<div class="item wrap3">6</div>
<div class="item wrap1">7</div>
<div class="item wrap3">8</div>
<div class="item wrap2">9</div>
<div class="item wrap3">10</div>
<div class="item wrap1">11</div>
<div class="item wrap1">12</div>
<div class="item wrap3">13</div>
<div class="item wrap3">14</div>
<div class="item wrap1">15</div>
<div class="item wrap2">16</div>
<div class="item wrap3">17</div>
<div class="item wrap2">18</div>
<div class="item wrap3">19</div>
<div class="item wrap1">20</div>
<div class="item wrap2">21</div>
</div>
<script>
$(window).on("load",function(){
waterfall();
});
function waterfall(){
var $items=$(".item"), //获取元素item
$itemWidth=$items.eq(0).outerWidth(true), //一个item的宽度
$cols=Math.floor($(window).width()/$itemWidth); //一行所占的列数
$("#ct").width($itemWidth*$cols).css("margin","0 auto");
//设置元素ct的宽度并居中
var hArr=[]; //声明一个空数组,把前6个元素的高度放进该数组
$items.each(function(index,value){
//遍历每个元素,并接收两个参数分别是元素的索引和元素的值
var $itemHeigth=$items.eq(index).outerHeight(true);
// 对应元素的高度
if(index<$cols){ //此时操作的是前六张照片
hArr[index]=$itemHeigth; //数组索引对应元素的高度
}else{
var $minHeight=Math.min.apply(null,hArr); //获取数组内高度最低的元素
var $minHeightIndex=$.inArray($minHeight,hArr); //获取数组内高度最低元素对应的索引
$(value).css({ //将value转换为jQuery对象,并设置样式
"position":"absolute",
"top":$minHeight+"px",
"left":$minHeightIndex*$itemWidth+"px"
})
hArr[$minHeightIndex]+=$items.eq(index).outerHeight(true);
//重新定义数组内个元素的高度
}
});
}
</script>
</body>
</html>
5.还有一种方法是用css3属性也可以实现瀑布流的做法。这种做法的特点是不需要计算窗口的宽度，浏览器会自动计算，只需要设置元素的列宽，代码少，性能很高。缺点就是列宽随着浏览器窗口大小进行改变，用户体验不好。还有一点就是css3的做法图片是按照垂直顺序排列的，打乱了图片的显示顺序。
css3瀑布流
网友评论