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 相关文章推荐
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 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读取IMAP邮件
2006/10/09 PHP
PHP编程风格规范分享
2014/01/15 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
js类型检查实现代码
2010/10/29 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
女大学生自我鉴定
2013/12/09 职场文书
社会发展项目建议书
2014/08/25 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
上诉答辩状范文
2015/05/22 职场文书
电影雷锋观后感
2015/06/10 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫