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插件tipswindown与hintbox冲突
Nov 05 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
jquery延迟对象解析
Oct 26 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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实现简单的MVC框架实例
2015/09/23 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python多线程下载文件的方法
2015/07/10 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
Python操作MySQL数据库的方法
2018/06/20 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
python简单区块链模拟详解
2019/07/03 Python
Python 使用type来定义类的实现
2019/11/19 Python
Python项目跨域问题解决方案
2020/06/22 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
DataReader和DataSet的异同
2014/12/31 面试题
财务主管自我鉴定
2014/01/17 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
小学数学课后反思
2014/04/23 职场文书
幼儿园辞职书
2015/02/26 职场文书
赞助商致辞
2015/07/30 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android