Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to realize the production of js native waterfall plug-in". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

specific contents are as follows

Let's see how it works.

和普通的瀑布流是一样的，在调用时制需要传入容器，图片以及图片宽度即可直接生成瀑布流

话不多说，看代码，后面说一下思路

1.html以及调用，其中HTML只需要一行

// 第一个参数，瀑布流容器 var dom = document.getElementsByClassName("main")[0]; // 第二个参数，图片链接，写入一个数组 var imgArr = ["img/0.jpg","img/45.jpg","img/225.jpg","img/3.png","img/7729.png","img/a.jpg","img/ama.jpg","img/c.png","img/0.jpg","img/3.png","img/45.jpg","img/225.jpg","img/7729.png","img/a.jpg","img/ama.jpg","img/c.png",]; // 调用插件，传入参数，第三个是图片宽度 waterFallFlow(dom,imgArr,220);

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 = 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);//填充数组为0 for (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坐标 前三步应该没有问题，来看第四步 想法是这样的

The main idea is to find the shortest column to arrange the next picture, and now the shortest appears in the second column.

At this point the picture is added to the second shortest column, now continue to find the shortest column, continue to add pictures

And so on to complete the waterfall flow arrangement, to see the process.

First calculate the total number of columns of pictures, create an array of length for the number of columns, all filled with 0, used to store y coordinates later

Traversing the child elements in the container, finding the minimum value in the current array and the position of the minimum value (number of columns) in the loop is the y coordinate.

At this point, you can find the x coordinate.

x =(number of columns +1)* spacing + current column * width (passed arguments)

So there's a place.

Note that every time you need to update the array, you need to modify the y coordinate of the added image position, and the asynchronous loading of the image.

"How to use js native waterfall plug-in production" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.