原生js实现瀑布流效果

本文实例为大家分享了js实现瀑布流效果的具体代码，供大家参考，具体内容如下

CSS样式：

<style>
 .cont{margin: 0 auto;position: relative;}
 .box{float: left;padding: 5px;}
 .imgbox{border: black solid 1px;padding: 5px;border-radius: 5px;}
 .imgbox img{width: 200px;display: block;}
</style>

HTML结构:

<div class="cont">

 <div class="box">
 <div class="imgbox">
 <img src="img/1.jpg" >
 </div>
 </div>
 //......此处省略雷同代码
 <div class="box">
 <div class="imgbox">
 <img src="img/2.jpg" >
 </div>
 </div>
 
</div>

JavaScript代码：

<script>
 onload = 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 minIndex = this.heightArr.indexOf(min);
 this.abox[i].style.position = "absolute";
 this.abox[i].style.top = min + "px";
 this.abox[i].style.left = minIndex * this.abox[0].offsetWidth + "px";
 this.heightArr[minIndex] = this.heightArr[minIndex] + this.abox[i].offsetHeight;
 }
 }
 }
</script>

小编还为大家准备了精彩的专题：瀑布流布局汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持奥多码。