### CSS瀑布流布局

最新推荐文章于 2024-08-01 15:19:04 发布

Fremount

最新推荐文章于 2024-08-01 15:19:04 发布

阅读量438

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/MZYJP/article/details/127987232

版权

css 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

最终效果描述

图片应该是等宽的，且上下之间衔接很完美的，依照从左到右，由上至下的规则排列，是有序的而不是无序的。

代码部分

html：

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }
    .container .item {
      position: relative;
      width: 400px;
      padding: 2px;
      counter-increment: imgcount;
      align-self: flex-start;
    }
    .container .item img {
      display: block;
      width: 100%;
    }
    .item::after {
      content: counter(imgcount);
      position: absolute;
      display: inline-block;
      top: 2px;
      left: 2px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.6);
    }
  </style>
  <body>
    <div class="container">
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg3.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/p2.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg5.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg9.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg6.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg7.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg8.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg7.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg6.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg3.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/p4.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg5.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg9.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg8.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg8.jpeg"
          alt=""
        />
      </div>
      <div class="item">
        <img
          src="https://qlbb-1302868537.cos.ap-beijing.myqcloud.com/prettyGirl/pg8.jpeg"
          alt=""
        />
      </div>
    </div>
  </body>

js：
我的思路是给定照片一个固定的宽度，但是我想让在不知道盒子的宽度大小的情况下，然后依然充满这个盒子,然后在高度的处理上，我们先算出一列有多少个元素，然后根据列数设定一个高度记录数组column_num_yArr ，这个数组用来记录每遍历一层时候的每一列的高度，这样我们遍历下一层的时候就可以根据这个高度数组进行定位操作。

    let waterfall_layoutf = function () {
      let container_dom = document.querySelector(".container");
      let container_width = container_dom.offsetWidth;
      let imgItem_dom_list = Array.from(document.querySelectorAll(".item"));
      // 计算出每行列数
      let column_count = Math.floor(
        container_width / imgItem_dom_list[0].offsetWidth
      );
      // 计算出每列应该缩放多大才能撑满
      let extral_width =
        container_width - imgItem_dom_list[0].offsetWidth * column_count;
      let newWidth = (
        extral_width / 3 +
        imgItem_dom_list[0].offsetWidth
      ).toFixed(3);
      let proportion = (newWidth / imgItem_dom_list[0].offsetWidth).toFixed(3);
      let column_num = 0;
      let column_num_yArr = new Array(column_count).fill(0);
      imgItem_dom_list.forEach((ele, index) => {
        ele.style.width = newWidth + "px";
        if (column_num % column_count === 0) {
          // 说明到新的一行 列要重新编排位置 主要是高度要重新编排
          column_num = 0;
        }
        let offsetTop = (ele.offsetTop - column_num_yArr[column_num]) * -1;
        ele.style.top = offsetTop + "px";
        /* ele.style.top =
          (ele.offsetTop - column_num_yArr[column_num]) * -1 + "px";
          console.log(column_num_yArr[column_num]); */
        column_num_yArr[column_num++] += ele.offsetHeight;
      });
    };
    window.onload = function () {
      waterfall_layoutf();
      // 计算列数 平均缩放至撑满宽度
      // 获取第一列高度  从第一个元素开始放 主要是要获取每个元素的height值
      // 这个时候得用一个循环每个元素从左到右按顺序排放
      window.addEventListener("resize", waterfall_layoutf);
    };