使用js实现响应式瀑布流布局（附带动画效果）

效果图

思路

1.获取图片容器的宽度，根据宽度的大小去控制列数的生成；

2.定义间距变量，图片数组和计算出每列宽度；

3.遍历图片元素数组，为每一项加上宽度；

4.进行判断如果i小于列数则将第一列的图片高度添加进数组然后设置style的top，left值控制其位置

5.如果i大于列数就说明是第二行，则找到上一行数组中高度最小的元素，根据其设置top，left值；

6.最后根据根据索引将每一项添加到数组

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {margin: 0;}.wrap {position: relative;margin: 10px;max-width: 1200px;margin: 0 auto;}.box {position: absolute;/* 图像灰度 */filter: grayscale(0.5);transition: left 0.5s, top 0.5s;}.box img {display: block;width: 100%;}</style></head><body><div class="wrap"><div class="box"><img src="http://wlog.cn/demo/waterfall/images/001.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/002.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/003.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/004.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/005.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/006.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/007.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/008.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/009.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/010.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/011.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/012.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/013.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/014.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/015.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/016.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/017.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/018.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/019.jpg" alt="" /></div><div class="box"><img src="http://wlog.cn/demo/waterfall/images/020.jpg" alt="" /></div></div><script>// 根据元素宽度生成列数从而实现响应式function createColumns(ele) {let width = ele.offsetWidth;if (width >= 1200) {_column = 5;}if (width < 1200 && width >= 992) {_column = 4;}if (width < 992 && width >= 768) {_column = 3;}if (width < 768) {_column = 2;}if (width < 360) {_column = 1;}return _column;}function render() {let _wrap = document.querySelector(".wrap"); //父容器let _column = createColumns(_wrap); //列数let _spacing = 10; //间距let _colWidth =(_wrap.offsetWidth - (_column - 1) * _spacing) / _column; //列宽let _boxList = document.querySelectorAll(".box");let _arr = []; //高度数组for (let i = 0; i < _boxList.length; i++) {_boxList[i].style.width = _colWidth + "px";if (i < _column) {_arr.push(_boxList[i].offsetHeight); //将每一列的高度存放到_arr数组中_boxList[i].style.top = 0;_boxList[i].style.left = (_colWidth + _spacing) * i + "px";} else {let min = Math.min(..._arr); //最小高度let index = _arr.indexOf(min); //最小高度的索引_boxList[i].style.top = min + _spacing + "px"; //第二列居上距离_boxList[i].style.left = (_spacing + _colWidth) * index + "px"; //第二列居左距离_arr[index] += _boxList[i].offsetHeight + _spacing;}}}// 在网页上的资源全部加载完成后再运行代码window.addEventListener("load", render);// 窗口宽度改变window.addEventListener("resize", render);</script></body>
</html>

csdn文章推荐受影响解决办法10个字10行

使用js实现响应式瀑布流布局（附带动画效果）相关推荐

JS结合PHP瀑布流,JavaScript_原生JS实现响应式瀑布流布局，原生JS实现的瀑布流布局，代 - phpStudy...
原生JS实现响应式瀑布流布局原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http:/ ...
响应式瀑布流布局新闻资讯技术博客织梦模板/DedeCMS自适应手机版游戏新闻网站源码下载
响应式瀑布流布局新闻资讯技术博客织梦模板,DedeCMS自适应手机版游戏新闻网站源码下载.本套织梦模板采用织梦最新内核开发的模板,这款模板使用范围广,不仅仅局限于一类型的企业,游戏新闻.游戏博客类的网 ...
js实现响应式瀑布流
导读:瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest ...
前端学习笔记7：响应式布局和简单动画效果
一.响应式布局当我们在利用浏览器的放大缩小的时候,经常会面临一些问题就是如何将浏览器中的内容缩放到我们适合观看的程度,这时候我们就引入一个概念叫做响应式布局(Responsive layout).它 ...
jQuery实现响应式瀑布流效果（jQuery+flex）
瀑布流原理:是一种常见的网页布局方式,它的特点是将内容以多列的形式呈现,每一列的内容高度不固定,根据内容的大小自适应调整,从而形成了像瀑布一样的流动效果. 瀑布流的实现原理涉及到数据加 ...
【网站开发必备】——12款响应式 Lightbox（灯箱）效果插件
灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果.网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也 ...
52.响应式剪贴蒙版视差滚动效果
效果 (源码网盘地址在最后) 视频演示「前端编程实战 52」HTML+CSS3 实现响应式剪贴蒙版视差滚动效果视频地址一:https://www.ixigua.com/i6841112747518 ...
html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...

使用js实现响应式瀑布流布局（附带动画效果）

效果图

思路

代码

使用js实现响应式瀑布流布局（附带动画效果）相关推荐

最新文章

热门文章