原生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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
Vue全局分页组件的实现代码
Aug 10 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
PHP中PDO的错误处理
2011/09/04 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
JavaScript 撑出页面文字换行
2009/06/15 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
几个判断型的面试题
2012/07/03 面试题
甜美蛋糕店创业计划书
2014/01/30 职场文书
仓管岗位职责范本
2014/02/08 职场文书
旅游安全协议书
2014/04/21 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
校车司机安全责任书
2015/05/11 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL