原生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 相关文章推荐
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
Table冻结表头示例代码
Aug 20 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
浅析Vue 生命周期
Jun 21 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 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
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
PHP实现递归无限级分类
2015/10/22 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
Javascript base64编码实现代码
2011/12/02 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python列表与元组的异同详解
2019/07/02 Python
Python如何读取文件中图片格式
2020/01/13 Python
python利用faker库批量生成测试数据
2020/10/15 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
大学军训感言1000字
2014/02/25 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
git stash(储藏)的用法总结
2022/06/25 Servers