js原生瀑布流插件制作 js原生瀑布流插件制作

本文实例为大家分享了js原生瀑布流插件制作的具体代码，供大家参考，具体内容如下
先看效果

文章图片

和普通的瀑布流是一样的，在调用时制需要传入容器，图片以及图片宽度即可直接生成瀑布流
话不多说，看代码，后面说一下思路
1.html以及调用，其中HTML只需要一行

2.HTML对应的css
.main是传入的容器，其中position: relative; 是必须要的
然后.main img{transition: all 0.5s; }是动画代码，给容器内所有图片添加

.main{border: 1px solid #ccc; width: 90%; margin: 0 auto; position: relative; }.main img{transition: all 0.5s; }

然后是js

/** * @param {*} dom 代表瀑布流容器 * @param {*} imgArr 图片数组 * @param {*} wid 图片宽度 */function waterFallFlow(dom, imgArr, wid) {var gap; //间隙var colNumber; //列数imgDom(); setImgPos(); //窗口发生改变的时候window.onresize = function(){setImgPos(); }/**var timer = null; * 上面这么写，丝滑，但是过于影响性能，拖动窗口时* 非常非常频繁的调用函数对图片进行重新拍排布* * 可以这样，防抖* * window.onresize = function(){* if(timer){*clearIntval(timer); * }*timer = setTimeout(function(){*setImgPos(); * },300); * }* */// 生成DOM元素function imgDom() {for (let i = 0; i < imgArr.length; i++) {const url = imgArr[i]; let img = document.createElement("img"); img.src = https://www.it610.com/article/url; img.style.width = wid +"px"; img.style.position = "absolute"; // 所有图片使用绝对定位img.style.left = ""; img.style.top = ""; img.onload = function(){setImgPos(); //图片的异步加载}dom.appendChild(img); }}// 设置每张图片的坐标function setImgPos() {cal(); var colY = new Array(colNumber); //存放每一列下一个图片的Y坐标colY.fill(0); //填充数组为0for (let i = 0; i < dom.children.length; i++) {var imgM = dom.children[i]; var y = Math.min(...colY); //求最小值var index = colY.indexOf(y); //第几列var x = (index + 1) * gap + index * wid; imgM.style.left = x + "px"; imgM.style.top = y + "px"; //更新数组colY[index] += parseInt(imgM.height)+gap; }//找到数组中最大的数字，来解决父级div塌陷问题var h = Math.max(...colY); console.log(h); dom.style.height = h + "px"; }// 计算相关数据function cal() {var containerWidth = parseInt(dom.clientWidth); colNumber = Math.floor(containerWidth / wid); //列数var space = containerWidth - colNumber * wid; gap = space / (colNumber + 1); //计算间隙 }}

基本上我都写了注释，都可以看懂
来看思路
1.接受传入的参数，容器，图片数组，图片宽度
2.创建图片元素，添加到对应容器中
3.给每个图片设置宽度，高度自适应，求列数，间距
4.给图片利用绝对定位来排布图片，计算对应的left和top值，也就是对应的x,y坐标
前三步应该没有问题，来看第四步
想法是这样的