灏天阁

如何用js实现瀑布流布局

· Yin灏

前言

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

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

image.png image.png

思路准备

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

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 lang="en">
  <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 class="box">
        <div class="box-img">
          <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 值设置为前一行高度最矮的图片高度minHeightleft 值设置为单张图片宽度这张图片的下标 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;
  }
}

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

- Book Lists -