瀑布流实现方法和注意事项

<template>
  <div class="container">
    <div class="wf_item" v-for="(item, index) in list" :key="index">
      <img :src="item.thumbURL" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    const otems = document.getElementsByClassName('wf_item')
    const otemsLen = otems.length
    const arr = []
    const init = () => {
      setImgPos()
      // 最后需要设置container的高度，否则会出现高度0
      document.getElementsByClassName('container')[0].style.height =
        arr[getMaxIdx(arr)] + 'px'
    }
    function setImgPos() {
      for (let i = 0; i < otemsLen; i++) {
        const item = otems[i]
        item.style.width = '232px'
        if (i < 5) {
          arr.push(item.offsetHeight)

          // 先设置第一行

          item.style.top = '0'
          if (i + (1 % 5) === 1) {
            // 表示最左边的一张
            item.style.left = '0'
          } else {
            item.style.left = i * (232 + 10) + 'px'
          }
        } else {
          // 找到arr中保存的第一行的里面高度最小的哪一个
          const minIndex = getMinIdx(arr)
          // 设置对应的left top
          item.style.left = otems[minIndex].offsetLeft + 'px'
          item.style.top = arr[minIndex] + 10 + 'px'
          // 修改对应小标保存的高度，因为高度变了
          arr[minIndex] += item.offsetHeight + 10
        }
      }
    }

    // 找最小下标
    function getMinIdx(arr) {
      const minHeight = Math.min.apply(null, arr)
      return [].indexOf.call(arr, minHeight)
    }

    // 找最大
    function getMaxIdx(arr) {
      const maxHeight = Math.max.apply(null, arr)
      return [].indexOf.call(arr, maxHeight)
    }
     this.$nextTick(() => {
      init()
    })
  },
  methods: {}
}
</script>

<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  background-color: #ffdb00;
}
.wf_item {
  position: absolute;
  overflow: hidden;
}
.wf_item img {
  width: 100%;
  display: block;
}
</style>

代码如上 简单 还没有封装 list里面对应的图片可以自己去找，我是拿的百度的接口返回值
1.图片不设置高度 ，给外层小盒子设置宽度 img默认百分百撑开 自动高度
图片注意设置block取消底部空白
2.大盒子相对定位 小盒子绝对 注意最后要设置一下大盒子的高度 否则高度为0
3.思路
1.首先设定好第一行每个盒子的left和top ，注意最左边的left为0
2.再设定第一行的同时，把第一行每个盒子的高度推到一个数组里 这个数组永远只会保留你对应列个数的元素 这里就是5个
3.第一行设定好之后，
再设置其他的时候
第一步先获取到数组中，高度最小的那个元素的距离左边的left 复制给新的小盒子
第二步 获取top . top = 数组里最小的高度+ 上线距离
这样就设定好了一个小盒子的top ,第三步就是重新设定之前那个最小高度对应下标中的元素值了
因为其对应的一列加了新的小盒子 高度应该变化了
这里arr 数组 其实保存的应该叫每一列在添加盒子后对应的高度

这样后面不断地加 left 是根据第一行来 top则每次都会增加

设置完后找到arr中最大的高度赋值给大盒子，让大盒子有高度

注意
this.$nextTick(() => {
init()
})
这个init要在回调里面执行，因为这个item是靠img撑开的，而如果你不在这里面执行那么，页面第一次加载的时候，src的图片还没有加载 导致盒子的高度为空 会出现错位的清空就是都贴在一起了

当然你可以图片的比例去给盒子加固定的高度 ，这个高度的显示在数据中定义 确保盒子生成没有问题整个布局不会错位

后面还会进行一个抽离配置