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/jquery获取地址栏url参数的方法
Mar 05 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php构造函数实例讲解
2013/11/13 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
Python中的模块和包概念介绍
2015/04/13 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
银行会计职员个人的自我评价
2013/09/29 职场文书
先进集体事迹材料
2014/02/17 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
娱乐节目策划方案
2014/06/10 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
出租房屋协议书
2014/09/14 职场文书
小班教师个人总结
2015/02/05 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers