手把手教你用js实现瀑布流布局-9543建站博客

广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

手把手教你用js实现瀑布流布局

本篇文章给大家带来了关于JavaScript的相关知识，其中主要跟大家聊一聊用怎么JS实现瀑布流布局，有代码示例，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。

手把手带你攻克瀑布流布局

前言

瀑布流布局，是现在比较流行的一种页面布局方式，即多行等宽元素排列，等宽不等高，后面的元素依次添加到前一行最矮的元素下方。

它可以有效的降低页面的复杂度，节省很多的空间；并且，瀑布流的参差不齐的排列方式，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动，提供了很好的用户体验！例如淘宝的页面就采用了这种布局方式，给大家看看淘宝的瀑布流布局的效果图（手机端）以及我们要实现的效果图（PC端）吧~

思路准备

通过了解瀑布流布局的方式，我们来梳理一下实现它的步骤，方便我们代码的编写。

1、首先我们需要准备很多张图片（我这准备的是40张），还有vscode开发工具。

2、编写前端代码，给图片添加样式让图片等宽并同行显示。

3、编写js代码，要知道第一行图片数量，下一张图片的序号以及前一行最矮的元素的序号，还有摆放的位置。

正文一、前端代码编写

1、首先我们定义一个container容器来装所有图片，在这个容器中用box容器装box-img容器再装入每张图片，这样方便之后样式的编写。

2、使图片同行显示--给box容器使用float:left;属性。

3、让图片等宽显示--给box-img容器设置width:150px;，img标签设置width:100%;继承父容器box-img高度的100%。

4、为了使效果更好看，我们给装图片的容器设置内边距，边框和阴影的效果。

前端完整代码附上：

<!DOCTYPE html><html><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>waterFall</title>    <script src="./index.js"></script></head><style>    *{        margin: 0;        padding: 0;    }    .container {        overflow: hidden;        position: relative;    }    .box{        float: left;        padding: 5px;    }    .box-img{        width: 150px;        padding: 5px;        border: 1px solid #484848;        box-shadow: 0 0 5px #484848;    }    .box-img img{        width: 100%;    }</style><body>    <div id="container">        <div>            <div>                <img src="./img/1.jpg" alt="">           </div>        </div>        /*.......后面接39个box，此处省略*/    </div>    </body></html>

登录后复制二、js代码编写1、首先用window.onload=function(){}来实现页面加载完毕后立即执行的功能

在这个函数中，我们调用imgLocation('container','box')函数来呈现最终效果，传入的实参是父容器'container'以及装图片的子容器'box'。

window.onload=function() {    imgLocation('container','box')}

登录后复制2、实现imgLocation()函数功能1）首先我们得获取所有要摆放的图片，并将其存入一个数组中

利用document.getElementById(parent)得到父容器；

调用getChildElement(cparent,content)方法，在这个方法中，先获取父容器所有标签，对所有标签遍历并用if条件语句得到类名为box的容器（装图片的容器），将其存入我们自己构建的一个数组中，返回值为这个数组，方便之后通过遍历来操作图片摆放的位置。

function imgLocation(parent,content){    var cparent=document.getElementById(parent)    //cparent下的所有的第一层的子容器 box    var ccontent=getChildElement(cparent,content)//数组，40个div}//取到父容器中的某一层子容器function getChildElement(parent,content){    var contentArr=[]    var allContent=parent.getElementsByTagName('*')//通过标签来选中得到一个数组    //遍历allContent把其中类名为content的容器都存到contentArr数组中    for(var i=0;i<allContent.length;i++){        if(allContent[i].className==content){    //当前这个容器的类名是否为content            contentArr.push(allContent[i])        }    }    return contentArr;}

登录后复制2）得到这个数组后，找出从谁开始是需要被摆放位置的

我们采用以下方法：

首先获取视窗的宽度和每张图片的宽度，将两者相除并向下取整可得到第一行可以放置图片的数量，自然也就知道了我们需要操作的那张图片的序号。

    //从谁开始是需要被摆放位置的    var winWidth=document.documentElement.clientWidth;//视窗宽度    var imgWidth=ccontent[0].offsetWidth;//图片宽度    var num=Math.floor(winWidth/imgWidth)//第一行能放几张图

登录后复制3）得到需要被摆放位置的图片序号后，确定其摆放位置

我们自己定义一个存储高度的数组，对前一行元素的高度进行遍历并存入数组，当遍历到需要被摆放位置的图片时，用Math.min()方法获取前一行高度最矮的元素高度，并用indexOf()方法获取到其下标。

再对我们所操作的这个图片容器的样式调整：position：absolute;绝对定位，top值设置为前一行高度最矮的图片高度minHeight，left值设置为单张图片宽度乘这张图片的下标minIndex。

最后，不要忘啦，摆放好图片后，还要更新摆放的那一列的高度哟~

    //操作num+1张图    var BoxHeightArr=[]    for(var i=0;i<ccontent.length;i++){        //前num张只要计算高度        if(i<num){            BoxHeightArr[i]=ccontent[i].offsetHeight        }        else{            //我们要操作的box  :ccontent[i]            var minHeight=Math.min.apply(null,BoxHeightArr)//apply:把最小值这个方法借给它用            var minIndex=BoxHeightArr.indexOf(minHeight)//返回数组下标            ccontent[i].style.position='absolute'//style设置样式            ccontent[i].style.top=minHeight+'px'            ccontent[i].style.left=imgWidth*minIndex+'px'            //更新最矮的那一列的高度            BoxHeightArr[minIndex]+=ccontent[i].offsetHeight        }    }

登录后复制

最终整合一下就可以实现瀑布流的布局效果啦！

最后

以上就是瀑布流布局的实现过程，看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～文章可能有一些错误，欢迎评论指出，也欢迎一起讨论。

推荐学习：《JavaScript视频教程》

以上就是手把手教你用js实现瀑布流布局的详细内容，更多请关注9543建站博客其它相关文章！