JS实现瀑布流效果


Posted in Javascript onMarch 07, 2020

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

话不多说,直接上代码。如下:

CSS部分:

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

HTML部分(图片可自行添加):

<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/WaterF1.jpg" alt="">
  </div>
 </div>
 // ...
 </div>

JS部分:

<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 = 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>

效果:

JS实现瀑布流效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中比较字符串是否相等的方法
Jul 23 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 #Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 #Javascript
node创建Vue项目步骤详解
Mar 06 #Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 #Javascript
小程序跳转H5页面的方法步骤
Mar 06 #Javascript
js实现点赞按钮功能的实例代码
Mar 06 #Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 #Javascript
You might like
用PHP产生动态的影像图
2006/10/09 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python使用opencv读取图片的实例
2017/08/17 Python
python的常用模块之collections模块详解
2018/12/06 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python中对数据进行各种排序的方法
2019/07/02 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
解决python replace函数替换无效问题
2020/01/18 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
个人对照检查材料
2014/02/12 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
优秀护士事迹材料
2014/12/25 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书