阿里面试官的常用问题：如何实现瀑布流

yunyi
436 阅读4分钟

前言：

在文章开始前，先让我们来了解一下什么是瀑布流
<&abcp>瀑布流，又称瀑布流式布局，是一种流行的网站页面布局方式。其特点在于视觉上的参差不齐多栏布局，随着用户向下滚动页面，布局会动态地加载更多数据块并附加到当前页面的尾部，营造出一种连续流畅的浏览体验。这种布局方式适用于展示等宽不等高的内容单元，如不同尺寸的图片或卡片，能够很好地适应和填充浏览器窗口的不同宽度，使得内容呈现更加灵活多样。

下图即是某书上的图片布局

iwEdAqNqcGcDAQTRAlAF0QUABrDLH5CRC8XHUgYwmaKzrHAAB9IZAt15CAAJomltCgAL0gAEDjk.jpg_720x720q90.jpg
瀑布流布局的优点包括：

  1. 简化导航：减少了传统分页操作，用户只需持续下拉即可浏览新内容。
  2. 提升浏览体验：通过减少点击行为，使内容消费更为连贯，适合快速扫视和发现内容。
  3. 高效利用空间：特别是在以图片或视觉内容为主导的网站上，能够最大化展示信息量，同时保持界面整洁。
  4. 视觉引导：错落有致的布局能够自然引导用户的视线流动，增加用户的探索兴趣。

正文


在了解了什么是瀑布流后，就可以开始尝试去实现它。这里是使用前端为主要手段。 在此之前，我们先要找到若干图片来作为素材，方便后续实现可视化的页面
现有以下10张图片，就用其来实现

image.png



一.HTML代码编写

  1. 首先，创建一个containter容器来存储上述的图片,然后再用box容器来存储每一个box-img单位，最后用box-img来分存每一张图片
  2. 给box-img的父容器box定义左浮动和内边距，使每一张图片排在同一行

以下是完整的HTML代码

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./index.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #container{
      position: relative;
    }
    .box{
      float: left;
      padding: 5px;
    }
    .box-img{
      width: 150px;
      padding: 5px;
      border: 1px solid #aaa;
    }
    img{
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="box">
      <div class="box-img">
        <img src="./1.webp" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src="./2.webp" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src="./3.webp" alt="">
      </div>
    </div>
        .....省略
        </div>
</body>
</html>

二.JS代码实现


1.利用window.onload调用imgLocation函数实现在页面的即时更新

image.png

image.png 2.imgLocation函数的构造
首先要获取所有的图片，并且得到宽度。之后再计算当前的页面能够在同一行放几张图片，因此用如下代码。

function imgLocation(parent, child) {
      var cParent = document.getElementById(parent)
      //  获取所有的图片
      var cChild = cParent.getElementsByClassName(child)
      //  获取图片的宽度
      var screenWidth = window.innerWidth
      var imgWidth = cChild[0].offsetWidth
      //  获取屏幕宽度
      var num = Math.floor(screenWidth / imgWidth)
      // 确定第一行能放几 n 张图
    }

3.接下来就要获取第一行所有图片的高度，为后面放不下的图片做铺垫

image.png

4.由于图片会超出页面的范围，所以要获取所有图片的高度存入数组，并找到最小高度及图片下标，再将多余图片按高度的降序放在第一行图片的下面

image.png

5.在摆放一张图片后，就要更新这一列的高度，如此循环摆放所有的图片

image.png

附上js文件的完整代码

window.onload = function() {
    // 确定第一行能放几 n 张图
      // 1. 获取屏幕宽度
      // 2. 获取图片的宽度
    // 操作第 n+1 张 摆放它的位置  放在高度最小的那一列
      // 1. 获取每一列的高度
      // 2. 更新这一列的高度
  
    imgLocation('container', 'box')
  
    function imgLocation(parent, child) {
      var cParent = document.getElementById(parent)
      //  获取所有的图片
      var cChild = cParent.getElementsByClassName(child)
      //  获取图片的宽度
      var screenWidth = window.innerWidth
      var imgWidth = cChild[0].offsetWidth
      //  获取屏幕宽度
      var num = Math.floor(screenWidth / imgWidth)
      // 确定第一行能放几 n 张图
    
      cParent.style.width = `${imgWidth * num}px`
  
      // 操作第 num+1 张
      var boxHeightArr = []
      for (var i = 0; i < cChild.length; i++) {
        if (i < num) {  // 第一行
          boxHeightArr.push(cChild[i].offsetHeight)
        } else {
          // 找数组最小值
          var minHeight = Math.min(...boxHeightArr)
          var minIndex = boxHeightArr.indexOf(minHeight)
  
          // 摆放图片
          cChild[i].style.position = 'absolute'
          cChild[i].style.top = minHeight + 'px'
          cChild[i].style.left = cChild[minIndex].offsetLeft + 'px'
  
          // 更新这一列的高度
          boxHeightArr[minIndex] = boxHeightArr[minIndex] + cChild[i].offsetHeight
        }
      }
  
  
  
    }
  
  
    
  }

总结

这些就是瀑布流的完整实现过程，如果觉得不错的话，希望点个赞支持一下，如果有错误也请各位大佬们帮忙纠正。

avatar
文章
阅读
粉丝