瀑布流布局的特点:宽度固定,高度不固定
如下:
实现思路:
- 每一行添加在高度最低的图片下面
- 绝对定位
- left:图片宽度*索引
- top:最小高度
- 创建一个数组,存放图片高度
- 用当前窗口的大小除以每个区域的大小再取整,就可以计算出当前窗口大小下应该展示的图片张数( cols = parseInt($(window).width()/boxWidth) boxWidth为每一个图片的宽度 )
简单的说就是 可视区域的宽/图片的宽=列数
具体代码:
HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
}
.item{
position: absolute;
width: 200px;
margin: 5px;
border: 1px solid #ddd;
transition: all 1s ease;
}
.item img{
/*height: 100%;*/
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="item"><img src="img/1.jpg"></div>
<div class="item"><img src="img/2.jpg"></div>
<div class="item"><img src="img/3.jpg"></div>
<div class="item"><img src="img/4.jpg"></div>
<div class="item"><img src="img/5.jpg"></div>
<div class="item"><img src="img/6.jpg"></div>
<div class="item"><img src="img/7.jpg"></div>
<div class="item"><img src="img/8.jpg"></div>
<div class="item"><img src="img/9.jpg"></div>
<div class="item"><img src="img/10.jpg"></div>
<div class="item"><img src="img/11.jpg"></div>
<div class="item"><img src="img/12.jpg"></div>
<div class="item"><img src="img/13.jpg"></div>
<div class="item"><img src="img/14.jpg"></div>
<div class="item"><img src="img/15.jpg"></div>
<div class="item"><img src="img/16.jpg"></div>
<div class="item"><img src="img/17.jpg"></div>
<div class="item"><img src="img/18.jpg"></div>
<div class="item"><img src="img/19.jpg"></div>
<div class="item"><img src="img/20.jpg"></div>
<div class="item"><img src="img/22.jpg"></div>
<div class="item"><img src="img/23.jpg"></div>
</div>
<script src="../js基础/jquery-3.3.1.min.js"></script>
<script src="index.js"></script>
</body>
</html>
js文件
$(function () {
init();
$(window).on("resize",function () { // 窗口改变 重新加载
init();
});
});
function init() {
//每行展示的列数
//width()不包括padding、margin、border
//outerWidth(true)包括padding、margin、border
var boxWidth = $(".item").outerWidth(true); // 每一个宽度
var cols = parseInt($(window).width()/boxWidth); // 列数
var heightArr=[];//存放高度
for(var i=0;i<cols;i++){
heightArr.push(0); // [0,0,0,...] 初始化数组 cols个0
}
$('.item').each(function (index,item) { // 遍历每个区域
var idx = 0;
var minBoxHeight = heightArr[0];
for(var i=0;i<heightArr.length;i++){
if(heightArr[i] < minBoxHeight){
minBoxHeight = heightArr[i];
idx = i;
}
}
$(item).css({
left:boxWidth*idx,// 每个区域的宽度*索引
top:minBoxHeight
});
heightArr[idx] += $(item).outerHeight(true);//更新列高
})
}