两行css代码实现瀑布流，html,css最简单的瀑布流实现方式且没有缺点！

两行css代码实现瀑布流，html,css最简单的瀑布流实现方式且没有缺点！

之前一直使用css,position定位+js原生的方法实现,代码如下

html代码段

<template>
  <div class="wrapper">
    <div v-for="(value,index) in img" :key="index" class="item">
      <img :src="value.pic" />
    </div>
  </div>
</template>

js代码段

<script>
export default {
  data() {
    return {
      img: []
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    // 获取线上数据
    getData() {
      this.$axios({
        url: "https://api.it120.cc/small4/shop/goods/list"
      }).then(res => {
        this.img = res.data;
        // 将回调延迟到下次 DOM 更新循环之后执行
        this.$nextTick(this.waterfall);
      });
    },

    // 瀑布
    waterfall() {
      // 获取元素
      let item = document.querySelectorAll(".item");
      // 获取可视宽度
      let cWidth = document.documentElement.clientWidth;
      // 获取元素的宽度
      let iwidth = item[0].clientWidth;
      // 然后计算可以拜访几列
      let columns = parseInt(cWidth / iwidth);
      // 声明一个存放高度的数组
      let heightArr = [];
      for (var i = 0; i < item.length; i++) {
        // 如果小于列数 就是定义第一行的图片位置
        if (i < columns) {
          item[i].style.top = 0 + "px";
          item[i].style.left = iwidth * i + "px";
          // 将一行图片的高度推进数组
          heightArr.push(item[i].clientHeight);
        } else {
          // 如果大于列数 就是定义第二行的图片位置
          // 声明一个最小的index值
          let minIndex = 0;
          // 声明一个最小高度
          let minHeight = heightArr[0];
          // 循环高度数组
          for (var m = 0; m < heightArr.length; m++) {
            if (heightArr[m] < minHeight) {
              // 求出最小高度值和最小高度元素的下标
              minHeight = heightArr[m];
              minIndex = m;
            }
          }
          // 第二行的第一张图片的left值
          item[i].style.left = item[minIndex].offsetLeft + "px";
          // 第二行的第一张图片的top值
          item[i].style.top = minHeight + "px";
          // 更新高度数组
          heightArr[minIndex] = minHeight + item[i].clientHeight;
        }
      }
    }
  }
};
</script>

css代码段

<style scoped lang='scss'>
.wrapper {
  width: 100%;
  position: relative;
  div {
    width: 48%;
    position: absolute;
    img {
      width: 100%;
    }
  }
}
</style>

==================================================================================================================

用两行css代码实现,代码如下

html代码段

<template>
  <div class="wrapper">
    <div v-for="(value,index) in img" :key="index" class="item">
      <img :src="value.pic" />
    </div>
  </div>
</template>

js代码段

<script>
export default {
  data() {
    return {
      img: []
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    // 获取线上数据
    getData() {
      this.$axios({
        url: "https://api.it120.cc/small4/shop/goods/list"
      }).then(res => {
        this.img = res.data;
      });
    },
  }
};
</script>

最精彩的css代码来了

<style scoped lang='scss'>
.wrapper {
  width: 100%;
     column-count: 2; //设置分几列
  div {
     break-inside: avoid;
    img {
      width: 100%;
    }
  }
}
</style>