css布局-页面瀑布流的实现方式

效果展示

方式一：css实现

说明：实现此效果需要满足以下条件

• 1.容器中的内容不可以太复杂，就是不能限制最小宽度，要求内容可随意缩放，否则会有间隔

主要代码：

-----html代码-----
<div class="pbl_flx">
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b3.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你</span>
        </div>
      </div>
      <div class="item">
        <img class="itemImg" src="./assets/b1.png" alt=""/>
        <div class="userInfo">
          <img class="avatar" src="./assets/b2.png" alt=""/>
          <span class="username">牵起你的左手护着你牵起你的左手护着你牵起你的左手护着你</span>
        </div>
      </div>
    </div>
-----html代码end-----

-----css代码------
// 瀑布流
.pbl_flx {
  margin: 0 auto;
  width: 100%;
  column-count: 4;
  // column-width: 240px; // 此项可不设置
  column-gap: 10px;
  /* 每一列图片包含层 */
  .item {
    margin-bottom: 10px;
    /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
    break-inside: avoid;
    background: #f1f1f1;
  }
  .item:hover {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
  }
  /* 图片 */
  .itemImg {
    width: 100%;
    vertical-align: middle;
  }
  /* 图片下的信息包含层 */
  .userInfo {
    padding: 5px 10px;
  }
  .avatar {
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  .username {
    margin-left: 5px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
  }
}
-----css代码end------

方式二：js+css实现

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 100%;
      position: relative;
      height: 100vh;
      box-sizing: border-box;
    }
    .item {
      position: absolute;
    }
    .item img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item"> <img src="./ip.png" alt="" /><div>啊大大大苏打啊大大大苏打啊大大大苏打啊大大大苏打</div> </div>
    <div class="item"> <img src="./sk.png" alt="" /><div>啊大大大苏打啊大大大</div></div>
    <div class="item"> <img src="./ip.png" alt="" /> </div>
    <div class="item"> <img src="./sk.png" alt="" /> </div>
    <div class="item"> <img src="./ip.png" alt="" /><div>啊大大大苏打啊大大大苏打啊大大大苏打啊大大大苏打</div></div>
    <div class="item"> <img src="./sk.png" alt="" /> </div>
    <div class="item"> <img src="./sk.png" alt="" /> </div>
    <div class="item"> <img src="./sk.png" alt="" /> </div>
    <div class="item"> <img src="./ip.png" alt="" /> </div>
    <div class="item"> <img src="./ip.png" alt="" /> </div>
    <div class="item"> <img src="./ip.png" alt="" /> </div>
    <div class="item"> <img src="./ip.png" alt="" /> </div>
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>    
  function waterFall() {
    var cWidth = document.body.clientWidth || document.documentElement.clientWidth;//页面可视区域宽度
    var iWidth = window.innerWidth;//浏览器窗口大小
    const scrollbarwidth = iWidth - cWidth;
    // 1 确定图片的宽度 - 滚动条宽度
    var columns = 3; //3列
    var wmh = 10; // 间距
    var pageWidth = getClient().width - scrollbarwidth - (columns-1)*wmh;
    // var itemWidth = parseInt(pageWidth/columns); //得到item的宽度
    var itemWidth = pageWidth/columns; //得到item的宽度
    $(".item").width(itemWidth).css({
      width: itemWidth,
      boxSizing: 'border-box',
      padding: wmh + 'px',
      border: '1px solid #f00',
      backgroundColor: '#f1f1f1'
    }); //设置到item的宽度
    var arr = [];
    $(".box .item").each(function(i){
      // var height = $(this).find("img").height();
      var height = $(this).height();
      if (i < columns) {
        // 2 第一行按序布局
        $(this).css({
          top:0,
          left:(itemWidth) * i + wmh * i,
        });
        //将行高push到数组
        arr.push(height);
      } else { // 其他行
        // 3 找到数组中最小高度  和 它的索引
        var minHeight = arr[0];
        var index = 0;
        for (var j = 0; j < arr.length; j++) {
          if (minHeight > arr[j]) {
            minHeight = arr[j];
            index = j;
          }
        }
        // 4 设置下一行的第一个盒子位置
        // top值就是最小列的高度
        $(this).css({
          top:arr[index] + (wmh*2) + wmh,//设置10的距离
          left:$(".box .item").eq(index).css("left")
        });
        // 5 修改最小列的高度
        // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
        arr[index] = arr[index] + height + wmh*2 + wmh;//设置10的距离
      }
    });
  }
  //clientWidth 处理兼容性
  function getClient() {
    return {
      width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
      height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
  }
  // 页面尺寸改变时实时触发
  window.onresize = function() {
    //重新定义瀑布流
    waterFall();
  };
  //初始化
  window.onload = function(){
    //实现瀑布流
    waterFall();
  }
</script>
</html>