原生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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
js验证表单大全
2006/11/25 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
中学生民族团结演讲稿
2014/08/27 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
政风行风整改方案
2014/10/25 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
学校端午节活动总结
2015/02/11 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
JS setTimeout与setInterval的区别
2022/04/20 Javascript