<template>
  <div id="main">
    <div class="box" v-for="i in arr">
      <div class="pic">
        <img :src="i.src" alt="">
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "waterfall",
        data(){
          return {
            arr:[
              {src:"../../static/images/0.jpg"},{src:"../../static/images/1.jpg"},{src:"../../static/images/2.jpg"},
              {src:"../../static/images/3.jpg"},{src:"../../static/images/4.jpg"},{src:"../../static/images/5.jpg"},
              {src:"../../static/images/6.jpg"},{src:"../../static/images/7.jpg"},{src:"../../static/images/8.jpg"},
              {src:"../../static/images/9.jpg"},{src:"../../static/images/10.jpg"},{src:"../../static/images/11.jpg"},
              {src:"../../static/images/12.jpg"},{src:"../../static/images/13.jpg"},{src:"../../static/images/14.jpg"},
              {src:"../../static/images/15.jpg"},{src:"../../static/images/16.jpg"},{src:"../../static/images/17.jpg"},
              {src:"../../static/images/18.jpg"}, {src:"../../static/images/19.jpg"},{src:"../../static/images/20.jpg"}
              ],

            arr_high:[], minHigh:"", minIndex:"", flag:true, count:0
          }
        },
        methods:{
          //预加载
          loadimg(){
            var count = 0;
            var len = this.arr.length;

            this.arr.forEach((val,index)=>{
              var imgObj = new Image();
              imgObj.src = val.src;
              imgObj.onload = ()=> {
                count++;
                if(count === len){
                  this.waterfall();
                }
              }
            });
          },
          //流式布局
          waterfall(){
            var boxW = document.getElementsByClassName("box")[0].offsetWidth;
            var windowW = document.documentElement.offsetWidth || document.body.offsetWidth;
            var cols = Math.floor(windowW/boxW);
            document.getElementById("main").style.width = boxW * cols + "px";
            this.arr_high = [];
            for(var i = 0;i < document.getElementsByClassName("box").length;i++){
              if(i < cols){
                this.arr_high.push(document.getElementsByClassName("box")[i].offsetHeight);
              }else{
                this.minHigh = Math.min.apply(null,this.arr_high);
                this.arr_high.forEach((val,index)=>{
                  if(val === this.minHigh)
                    this.minIndex = index;
                });
                document.getElementsByClassName("box")[i].style.position = "absolute";
                document.getElementsByClassName("box")[i].style.left = boxW * this.minIndex + "px";
                document.getElementsByClassName("box")[i].style.top = this.minHigh + "px";
                this.arr_high[this.minIndex] += document.getElementsByClassName("box")[i].offsetHeight;
              }
            }
          },
          //是否滑动到底部
          ifLastBox(){
            var lastBox = document.getElementsByClassName("box")[document.getElementsByClassName("box").length - 1];
            var scrollHigh = document.body.scrollTop || document.documentElement.scrollTop;
            var screenHigh = document.body.clientHeight || document.documentElement.clientHeight;
            return ((scrollHigh + screenHigh) > (lastBox.offsetTop + lastBox.offsetHeight/2)) ? true : false;
          },
        },
        mounted:function () {
          this.$nextTick(function () {
            this.loadimg();
            window.onscroll = ()=> {
              if(this.ifLastBox()){
                this.arr.forEach((val,index)=>{
                  var obj = {};
                  obj.src = val.src;
                  this.arr.push(obj);
                });
                this.loadimg();
              }
            }
          });
        }
    }
</script>

<style scoped>
  *{margin: 0; padding: 0;}
  #main{position: relative; margin: 0 auto;}
  .box{padding: 10px; float: left;}
  .pic{padding: 10px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 5px #ccc; border: 1px #ccc solid;}
  .pic img{width: 300px; height: auto; background: url("../../static/echo/images/loading.gif") 50% no-repeat;}
</style>

vue.js  —— 原生JS + 图片预加载重写流式布局，解决代码堆叠问题  

瀑布流布局

var hArr=[];
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
    hArr.push(oBox[i].offsetHeight)