- 瀑布流的特点：宽度确定，高度不确定；通过定位处理的。
- 每一行添加在高度最低的下面
- 绝对定位
- 创建一个数组
- 浏览器可视区域的宽度/图片的宽度=列数
- html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js实现瀑布流</title>
<style>
.box{
position: relative;
}
.box .item{
position: absolute;
width: 200px;
margin: 5px;
transition: all 1s;
border:1px solid #ccc;
}
.box .item img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="item"><img src="image/1.jpeg" alt="" /></div>
<div class="item"><img src="image/1.jpg" alt="" /></div>
<div class="item"><img src="image/2.jpg" alt="" /></div>
<div class="item"><img src="image/3.jpg" alt="" /></div>
<div class="item"><img src="image/4.jpg" alt="" /></div>
<div class="item"><img src="image/5.jpg" alt="" /></div>
<div class="item"><img src="image/6.jpg" alt="" /></div>
<div class="item"><img src="image/7.jpg" alt="" /></div>
<div class="item"><img src="image/8.jpg" alt="" /></div>
<div class="item"><img src="image/9.jpg" alt="" /></div>
</div>
</body>
</html>
script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 浏览器窗口发生变换的时候 重新加载
$(window).resize(function () {
init();
})
init();
function init(){
//width() 不包括 margin/padding/border
//outerWidth(true) 包括padding/border 加参数true 能获取到argin
var itemWidth=$(".item").outerWidth(true);//每个图片的宽度
//console.log(itemWidth)
var cols=parseInt($(window).width()/itemWidth);//浏览器的宽度/图片的宽度=列数
var heightArr=[];//创建一个存放每个图片的高度的数组
for(var i =0;i<cols;i++){ //每个数组的长度就是 列数的长度
heightArr.push(0);//最开始的时候可以默认高度是0；【，0，0】
}
//循环每一条图片
$('.item').each(function(index,item){
var idex=0;//初始索引为0
var minHeight=heightArr[0];//初始设置最小高度是数组的第一个
for(var i=0;i<heightArr.length;i++){
if(heightArr[i]<minHeight){//判断数组中的每一个是否比默认设置的最小高度小，小于直接赋值给最小高度
minHeight=heightArr[i];//最小高度
idex=i;//当前索引
}
}
//设置每个图片的样式
$(item).css({
left:itemWidth*idex,//图片距离左边的位置 就是当前图片的宽度*他的索引
top:minHeight //图片距离顶部的位置就是最小高度
})
heightArr[idex]+=$(item).outerHeight(true); //高度对应的索引值就是当前图片高度的值
})
}
})
</script>
网友评论