纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

js瀑布流效果 原生js实现瀑布流效果

Tangerine.   2021-04-21 我要评论

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>

相关文章

猜您喜欢

  • django跨域资源共享 Django跨域资源共享问题(推荐)

    想了解Django跨域资源共享问题(推荐)的相关内容吗,黑里俏在本文为您仔细讲解django跨域资源共享的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:django跨域资源共享,django跨域,共享,下面大家一起来学习吧。..
  • vue+echarts 数据可视化大屏 基于vue+echarts 数据可视化大屏展示的方法示例

    想了解基于vue+echarts 数据可视化大屏展示的方法示例的相关内容吗,你好!YOYO在本文为您仔细讲解vue+echarts 数据可视化大屏的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue+echarts,数据可视化大屏,vue,echarts,数据可视化,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.amzsoft.cn 【亚马逊软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式