实现瀑布流的几种方式（效果图）

yunduan666542

已于 2024-07-10 14:56:36 修改

阅读量716

点赞数 11

分类专栏： css 文章标签： css3 html5 前端

于 2024-07-10 13:54:40 首次发布

本文链接：https://blog.csdn.net/yunduan666542/article/details/140321796

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一 . 使用css属性：column-count（不好）

column-count 是 CSS 中的一个属性，用于设置元素的内容应该被分割成多少列来显示，轻松地实现多列布局效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .waterfall-container {
      column-count: 2; /* 根据需要调整列数 使用这个属性就能实现----------------------------*/
      column-gap: 20px; /* 列与列之间的间距 */
      width: 90%; /* 容器宽度 */
      margin: 20px auto; /* 外边距，使容器居中 */
    }
    .waterfall-item {
      /* 这里可以添加一些基本的样式，如背景色、边框等 */
      background-color: #f4f4f4;
      margin-bottom: 20px; /* 元素之间的间距 */
      break-inside: avoid; /* 防止内容跨列显示，但这不是所有浏览器都支持 */
      /* 为了让内容在容器内垂直居中，可以添加以下样式（可选） */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* 设置一个固定的高度或最小高度来模拟不同高度的元素（可选） */
      /* height: 150px; 或 min-height: 100px; */
    }
    /* 为了更明显地看到效果，可以给每个元素添加一些随机高度 */
    /* 注意：实际项目中，你可能需要通过 JavaScript 来动态设置这些高度 */
    .waterfall-item:nth-child(odd) {
      height: 200px; /* 奇数项的高度 */
      background-color: red;
    }
    .waterfall-item:nth-child(even) {
      height: 150px; /* 偶数项的高度 */
      background-color: blue;
    }
  </style>
  <body>
    <div class="waterfall-container">
      <div class="waterfall-item">内容1</div>
      <div class="waterfall-item">内容2</div>
      <div class="waterfall-item">内容2</div>
      <div class="waterfall-item">内容1</div>
      <div class="waterfall-item">内容1</div>
      <div class="waterfall-item">内容2</div>
      <div class="waterfall-item">内容2</div>
    </div>
  </body>
</html>

是不是感觉瀑布流没那么难？一个样式就能实现我们要的效果，但是如果换成3列来看呢？

你就会发现他是垂直方向上的排列，只有第一列补充完后，第二列才开始补充，不是我们想要市面上所需要的横向排列瀑布流。

 .waterfall-container {
      column-count: 3; /* 根据需要调整列数 使用这个属性就能实现----------------------------*/
      column-gap: 20px; /* 列与列之间的间距 */
      width: 90%; /* 容器宽度 */
      margin: 20px auto; /* 外边距，使容器居中 */
    }

二 . 使用js定位实现（广泛使用）

先获取父盒子的宽度，试试能塞下多少个小图片，当第一行满了后，接下来就换行，就会获取第一行中最小图片的高度，后再获取它距离左边的宽度，然后才用定位属性，将第二行的图片添加到第一行最小图片高度的下面，具体不好讲，认真看代码就能理解了

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #container{
      position: relative;
      /* overflow: hidden; */
      width: 1000px;

    }
    .box{
      float: left;
      padding: 5px;
      
    }
    .box-img{
      width: 250px;
      padding: 5px;
      /* border: 1px solid #aaa; */
    }
    img{
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="box">
      <div class="box-img">
        <img src="https://gd-hbimg.huaban.com/ede93cf241ce93df1f824022ce1bc6dd042879819162e-fvCJH6" alt="">
      </div>
  </div>
    <div class="box">
      <div class="box-img">
        <img src="https://gd-hbimg.huaban.com/2d14622d76dbcd036cc47f240c80d5f1b9e6481da3430-r5cTIt" alt="">
      </div>
  </div>
    <div class="box">
      <div class="box-img">
        <img src="https://gd-hbimg.huaban.com/824306750839c34939b4345039e7425740598dd510a9c1-ewh29L" alt="">
      </div>
  </div>
    <div class="box">
      <div class="box-img">
        <img src="https://gd-hbimg.huaban.com/824306750839c34939b4345039e7425740598dd510a9c1-ewh29L" alt="">
      </div>
  </div>
    <div class="box">
      <div class="box-img">
        <img src="https://gd-hbimg.huaban.com/ce90e5b734b0c9933335d962a02ae6e8227965b6a984c-Gg1vRz" alt="">
      </div>
  </div>
    <div class="box">
      <div class="box-img">
        <img src="https://gd-hbimg.huaban.com/9fa5103953d1b3f2a70984f17395c1cf1eddc8db2af38-Q2fm1x" alt="">
      </div>
  </div>
    <div class="box">
      <div class="box-img">
        <img src="https://gd-hbimg.huaban.com/ce90e5b734b0c9933335d962a02ae6e8227965b6a984c-Gg1vRz" alt="">
      </div>
  </div>
</body>
<script>
  //网页完全加载后执行特定的代码或函数。这意呀着，当网页上的所有内容
  //（包括图片、样式表、脚本文件等）都加载完成后，window.onload 事件会被触发
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 = cParent.offsetWidth
      console.log(screenWidth,'父亲的宽度',cChild);
      var imgWidth = cChild[0].offsetWidth
      var num = Math.floor(screenWidth / imgWidth)
      console.log(num);
    //   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)
          console.log(boxHeightArr,minHeight);
          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
        }
      }
    }
  }
</script>
</html>