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 简便实现页面元素数据验证功能
Mar 24 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 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
SONY SRF-M100的电路分析
2021/03/02 无线电
php实现比较全的数据库操作类
2015/06/18 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
python获得图片base64编码示例
2014/01/16 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python学习之编写查询ip程序
2016/02/27 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
pandas数据拼接的实现示例
2020/04/16 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
python zip()函数的使用示例
2020/09/23 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
后勤园长自我鉴定
2013/10/17 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
助学贷款贫困证明
2014/09/23 职场文书
初中家长评语大全
2014/12/26 职场文书
营销计划书范文
2015/01/17 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书