如何用js实现瀑布流布局

前端开发   发布日期:2025年02月17日   浏览次数:178

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

一、前端代码编写

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

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

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

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

前端完整代码附上:

  1. <!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'。

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

2、实现imgLocation()函数功能

1)首先我们得

  1. 获取所有要摆放的图片
,并将其存入一个
  1. 数组

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

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

  1. 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)得到这个

  1. 数组
后,找出
  1. 从谁开始
是需要
  1. 被摆放
位置的

我们采用以下方法:

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

  1. //从谁开始是需要被摆放位置的
    var winWidth=document.documentElement.clientWidth;//视窗宽度
    var imgWidth=ccontent[0].offsetWidth;//图片宽度

    var num=Math.floor(winWidth/imgWidth)//第一行能放几张图

3)得到需要

  1. 被摆放
位置的图片序号后,确定其
  1. 摆放位置

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

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

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

  1. //操作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
    }
    }

以上就是如何用js实现瀑布流布局的详细内容,更多关于如何用js实现瀑布流布局的资料请关注九品源码其它相关文章!