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 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
浅析JS运动
Dec 28 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
JS中的多态实例详解
Oct 15 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 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/12/08 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php防止sql注入的方法详解
2017/02/20 PHP
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
token 机制和实现方式
2020/12/15 Javascript
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
实例详解Python模块decimal
2019/06/26 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
python中四舍五入的正确打开方式
2021/01/18 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
指导教师评语
2014/04/26 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
任命通知范文
2015/04/21 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
理解深度学习之深度学习简介
2021/04/14 Python