本文主要详细介绍js原生瀑布插件的制作。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享js原生瀑布插件的具体代码，供大家参考。具体内容如下
先看效果。
和普通的瀑布流是一样的。调用时，传入容器、图片、图片宽度就可以直接生成瀑布流。
话不多说，看看代码，后面再谈思路。
和HTML呼叫，其中HTML只需要一行。
身体
div class='main'/div
script src='index.js'/script
脚本
//第一个参数，瀑布容器
var DOM=document . getelementsbyclassname(' main ')[0]；
//第二个参数image link被写入数组
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/img
//调用插件，传入参数，第三个是图片宽度
瀑布流(dom，imgArr，220)；
/脚本
/body
对应2的Css。超文本标记语言。main是传入容器，其中position:relative；这是必要的。
然后。主img {过渡：全0.5s}是一个动画代码，添加到容器中的所有图片中。主要{
边框：1px纯色# ccc
宽度：90%；
边距：0自动；
位置：相对；
}。主图像{
过渡：全0.5s
}
然后js
/**
* @param {*} dom代表瀑布容器。
* @ param { * } imgArr图像数组
* @param {*} wid图片宽度
*/
函数waterFallFlow(dom，imgArr，wid) {
var缺口；//间隙
var colNumber//列数
img DOM()；
setImgPos()；
//当窗口改变时
window.onresize=function(){
setImgPos()；
}
/* * var timer=null；
*上面是这么说的，丝滑，但是太影响表演了。拖动窗口时
*非常非常频繁地调用该函数来重新排列图片。
*
*你可以这样做，防抖
*
* window.onresize=function(){
* if(定时器){
* clearIntval(定时器)；
* }
* timer=setTimeout(function(){
* setImgPos()；
* },300);
* }
*
*/
//生成DOM元素
函数imgDom() {
for(设I=0；i imgArr.lengthi ) {
const URL=im garr[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)；
}
}
//设置每张图片的坐标
函数setImgPos() {
cal()；
var colY=新数组(colNumber)；//存储每列中下一个图片的Y坐标
coly . fill(0)；//填充数组为0
for(设I=0；I DOM . children . length；i ) {
var imgM=DOM . children[I]；
var y=Math.min(.colY)；//找到最小值
var index=coly . index of(y)；//什么栏目？
var x=(指数1) *缺口指数* wid
imgm . style . left=x ' px '；
imgm . style . top=y ' px '；
//更新数组
colY[index]=parse int(imgm . height)gap；
}
//查找数组中的最大数字，以解决父div折叠问题
var h=Math.max(.colY)；
console . log(h)；
DOM . style . height=h ' px '；
}
//计算相关数据
函数cal() {
var container width=parse int(DOM . client width)；
colNumber=math . floor(container width/wid)；//列数
var space=container width-colNumber * wid；
gap=space/(colNumber 1)；//计算差距
}
}
基本上我都有写评论，看得懂。
来看思路
1.接受传入的参数、容器、图像数组和图像宽度。
2.创建一个图片元素并将其添加到相应的容器中
3.设置每张图片的宽度和高度，并计算列数和间距。
4.通过绝对定位排列图片，计算对应的左顶值，即对应的X和Y坐标。
前三步应该没有问题。让我们看看第四步
想法是这样的。
主要思路是找到最短的一列来安排下一张图片，现在最短的出现在第二列。
这时，图片被添加到之前最短的第二列。现在继续找最短的一栏，继续加图。
等等来完成瀑布流的排列看具体流程。
首先计算图片有多少列，创建一个列数长度的数组，全部用0填充，用来存放后面的Y坐标。
遍历容器中的子元素，在循环中找到当前数组中的最小值，最小值所在的位置(列数)就是Y坐标。
这时候就可以找到x坐标了。
X=(列数1)*当前列的间距*宽度(传入的参数)
所以有一个地方。
注意，每次需要更新数组时，都需要修改图片添加位置的Y坐标，异步加载图片。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。