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函数中的arguments参数
Aug 01 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
Vue 技巧之控制父类的 slot
Feb 24 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 memcache扩展的三种安装方法
2009/04/26 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
比较完整的微信开发php代码
2016/08/02 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
javascript高级学习笔记整理
2011/08/14 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
JQuery基础语法小结
2015/02/27 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python fileinput模块使用介绍
2014/11/30 Python
一张图带我们入门Python基础教程
2017/02/05 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
先进个人获奖感言
2014/01/24 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
公司离职证明标准格式
2014/11/18 职场文书
2014年体育工作总结
2014/11/24 职场文书
教师聘用意向书
2015/05/11 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书