如何运用js实现瀑布流布局

发布时间：2023-09-06 11:00:37 所属栏目：教程来源：转载

导读： 　　这篇“如何用js实现瀑布流布局”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收

　　这篇“如何用js实现瀑布流布局”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何用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

　　        }

　　    }

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!