原生js实现瀑布流效果

编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了原生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>

长沙网络推广还为大家准备了精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板