原生js实现瀑布流效果


Posted in Javascript onMarch 09, 2020

本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下

CSS样式:

<style>
 .cont{margin: 0 auto;position: relative;}
 .box{float: left;padding: 5px;}
 .imgbox{border: black solid 1px;padding: 5px;border-radius: 5px;}
 .imgbox img{width: 200px;display: block;}
</style>

HTML结构:

<div class="cont">

 <div class="box">
 <div class="imgbox">
 <img src="img/1.jpg" >
 </div>
 </div>
 //......此处省略雷同代码
 <div class="box">
 <div class="imgbox">
 <img src="img/2.jpg" >
 </div>
 </div>
 
</div>

JavaScript代码:

<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 = Math.min(...this.heightArr);
 var minIndex = this.heightArr.indexOf(min);
 this.abox[i].style.position = "absolute";
 this.abox[i].style.top = min + "px";
 this.abox[i].style.left = minIndex * this.abox[0].offsetWidth + "px";
 this.heightArr[minIndex] = this.heightArr[minIndex] + this.abox[i].offsetHeight;
 }
 }
 }
</script>

小编还为大家准备了精彩的专题:瀑布流布局汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 #Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 #Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 #Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 #Javascript
JS中的const命令你真懂它吗
Mar 08 #Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 #Javascript
Vue vm.$attrs使用场景详解
Mar 08 #Javascript
You might like
php MYSQL 数据备份类
2009/06/19 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
yii操作cookie实例简介
2014/07/09 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
Stop SQL Server
2007/06/21 Javascript
JS查看对象功能代码
2008/04/25 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
js实现选项卡效果
2020/03/07 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
Python类定义和类继承详解
2015/05/08 Python
python中lambda()的用法
2017/11/16 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
简单实现Python爬取网络图片
2018/04/01 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Python实现直播推流效果
2019/11/26 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
客户经理岗位职责
2013/12/08 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
幼师自荐信范文
2015/03/06 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript