简单的瀑布流效果的实现—纯CSS和原生JS两种方式
司寇祺
纯CSS实现瀑布流
纯css实现瀑布流是利用多列实现，缺点是没有行为控制，只能多次添加图片并且不能实现选择性的查找位置插入图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>picture</title>
<style type="text/css">
body{background: #352323 url(../img/a.png);}
.wrap{width: 95%;margin: 0 auto;column-count: 5;column-gap: 0;}
.wrap figure{border: solid 2px pink;margin: 0 5px 5px;padding: 5px;break-inside: avoid;}
.wrap figure img{width: 100%;}
.wrap figure figcaption{color: burlywood;font-weight: 900;text-align: center;line-height: 40px;}
</style>
</head>
<body>
<section class="wrap">
/*此处只用两个图片示例，如果要生成瀑布流效果需要多张图片才能看出*/
<figure>
<img src="../img/1.jpg" alt="">
<figcaption>当红女星男性陷入整容旋涡</figcaption>
</figure>
<figure>
<img src="../img/2.jpg" alt="">
<figcaption>当红女星男性陷入整容旋涡</figcaption>
</figure>
</section>
</body>
</html>
原生JS实现瀑布流
原生JS实现瀑布流实现了自适应，实现每行的图片张数的不同，并且可以自行添加图片，都是从页面上获取宽高的。
//思路：
// 瀑布流效果
// 1.第一行浮动（通过css实现）
// 2.如何区分第一行和后面的行
// 2.1先找到第一行最矮的
// 2.2后面的行的所有内容全部定位
// 2.3left设置最矮的元素的索引*任意一个元素的宽度
// 2.4top设置成上一行最矮的元素的高度
// 2.5修改最矮的那个元素，加上刚刚放置元素的高度
// 重置执行2.1向后的步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cont{margin: 0 auto;position: relative;}
.box{float: left;padding: 4px;}
.imgbox{border: solid 1px black;padding: 4px;border-radius: 4px;}
.imgbox img{width: 200px;display: block;}
</style>
<script>
onload = function(){
var wf = new WaterF();
wf.init();
}
//想要改变窗口时实时刷新，可以写上下边的代码↓↓↓↓
// onresize = function(){
// var wf = new WaterF();
// wf.init();
// }
class WaterF{
constructor(){
this.clientW = document.documentElement.clientWidth;
this.abox = document.querySelectorAll(".box");
this.cont = document.querySelector(".cont");
}
init(){
// 根据屏幕的宽度 / 任意一个结构的宽度，得到一行最大能放几个
this.maxNum = parseInt(this.clientW / this.abox[0].offsetWidth);
// 根据一行能放置的个数 * 任意一张图片的宽度，得到了大框的真正的宽
this.cont.style.width = this.maxNum * this.abox[0].offsetWidth + "px";
// 完善布局之后，开始区分第一行和后面的行
this.firstLine();
this.otherLine();
}
firstLine(){
// 第一行，获取所有元素的高度放在一个数组中，准备获取最小值
this.heightArr = [];
for(var i=0;i<this.maxNum;i++){
this.heightArr.push(this.abox[i].offsetHeight);
}
}
otherLine(){
// 需要拿到后面行的所有元素
for(var i=this.maxNum;i<this.abox.length;i++){
// 在拿到后面行的元素的时候，获取第一个行的最小值和最小值所在的索引
// var min = Math.min(...this.heightArr);
var min = getMin(this.heightArr);
var minIndex = this.heightArr.indexOf(min);
// 设置定位
this.abox[i].style.position = "absolute";
// 根据最小值设置top
this.abox[i].style.top = min + "px";
// 根据最小值的索引设置left
this.abox[i].style.left = minIndex * this.abox[0].offsetWidth + "px";
// 修改最小值为，原来的数据+当前新放置元素的高度
this.heightArr[minIndex] = this.heightArr[minIndex] + this.abox[i].offsetHeight;
// 剩下的交给循环
}
}
}
function getMin(arr){
var myarr = [];
for(var j=0;j<arr.length;j++){
myarr.push(arr[j]);
}
return myarr.sort((a,b)=>a-b)[0];
}
</script>
</head>
<body>
<div class="cont">
//此处只用两个图片示例，用户可自行添加图片
<div class="box">
<div class="imgbox">
<img src="../img/WaterF2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../img/WaterF2.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
类似资料：