专注前端行业精选
使用原生js来实现瀑布流效果
作者:鹏仔先生日期:2020-06-03 10:01:51浏览:1782分类:JavaScript
瀑布流网页页面效果目前是一种很常见的布局,下面使用原生js实现一个瀑布流效果,附代码如下
复制代码,图片路径自己修改即可
<style type="text/css"> *{ margin:0; padding:0; } img{ vertical-align: bottom; } #box{ position: relative; margin:0 auto; width: 780px; } #box .panel{ position: absolute; } #box .panel img{ margin:10px; padding:10px; width: 220px; background: #fff; border-radius: 5px; box-shadow: 0 0 8px #ccc; } </style>
<body> <div id="box"> <div class="panel"><img src="img/1.jpg"></div> <div class="panel"><img src="img/2.jpg"></div> <div class="panel"><img src="img/3.jpg"></div> <div class="panel"><img src="img/4.jpg"></div> <div class="panel"><img src="img/5.jpg"></div> <div class="panel"><img src="img/6.jpg"></div> <div class="panel"><img src="img/7.jpg"></div> <div class="panel"><img src="img/8.jpg"></div> <div class="panel"><img src="img/9.jpg"></div> <div class="panel"><img src="img/10.jpg"></div> <div class="panel"><img src="img/11.jpg"></div> <div class="panel"><img src="img/12.jpg"></div> <div class="panel"><img src="img/13.jpg"></div> <div class="panel"><img src="img/14.jpg"></div> <div class="panel"><img src="img/15.jpg"></div> <div class="panel"><img src="img/16.jpg"></div> <div class="panel"><img src="img/17.jpg"></div> <div class="panel"><img src="img/18.jpg"></div> <div class="panel"><img src="img/19.jpg"></div> <div class="panel"><img src="img/20.jpg"></div> </div> </body>
<script type="text/javascript"> let box = document.getElementById('box'); let panel = Array.from(box.children); // 声明panel的宽度 const PANEL_WIDTH = panel[0].offsetWidth; // 声明列数 let totalColumn = Math.trunc(document.documentElement.clientWidth/PANEL_WIDTH); // 就算box的宽度 box.style.width=totalColumn*PANEL_WIDTH+'PX'; // 声明图片的宽度 const IMG_WIDTH =220; // 记录每列的高度 let columnHeight = []; panel.forEach(function(v, k){ if(k< totalColumn){ v.style.left=k*PANEL_WIDTH+'PX'; v.style.top = 0; // 记录列的高度 columnHeight.push(v.offsetHeight); }else{ //剩余的图片找最低的列高度 let minHeight = Math.min(...columnHeight); // 查找最小值在数组中的小标 let minHeightKey = columnHeight.indexOf(minHeight); // 指定位置 v.style.left=minHeightKey*PANEL_WIDTH+'px'; v.style.top = minHeight+'px'; // 更新列的高度 columnHeight[minHeightKey]=minHeight+v.offsetHeight; } }) </script>
DEMO下载 http://pan.baidu.com/s/1OM1TdAeoy1GC85Jx1_SmXA
猜你还喜欢
- 10-08 vue按钮限制连点封装 自定义指令限制连点
- 09-14 nvm常用命令有哪些?nvm如何切换node版本?nvm如何下载node?
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
- 07-13 vue中实现文件批量打包压缩下载(以及下载跨域问题分析)
- 07-08 uniapp调用地图,进行位置查询,标记定位
- 11-05 js截取字符串前几位或者截取字符串后几位
- 10-25 js替换字符串某个字符,js修改字符串中指定字符
- 10-20 uniapp中text-indent不起作用,uniapp首行缩进不管用如何解决?
- 09-26 vue给单独组建的body添加类名
- 08-12 elemtnui 表格如何修改某行文字颜色
- 08-03 vue中调用百度地图 获取经纬度
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。