1. 编程圈首页
  2. 文库
  3. 前端开发

原生js实现瀑布流效果

本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下CSS样式: .cont{margin: 0 auto;position: relative;} .box{float: left;

本文实例为大家分享了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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程圈

发布者:编程圈,转转请注明出处:https://www.bianchengquan.com/article/230187.html

发表评论

登录后才能评论