实现一个 瀑布流 封装until 工具

<template>
    <div class="cart" ref="cart">
        <van-nav-bar
            title="购物车"
            left-text=""
            left-arrow
            @click-left="$router.back()"
        >
            <template #right>
                <!-- <van-icon name="search" size="18" /> -->
                {{userInfo.M_LoginID}}
                {{userInfo.M_Scores}}
                {{info.name}}
            </template>
        </van-nav-bar>
        <!-- 购物车列表 -->
        <div class="list">
            <div class="items" v-for="(item,index) in goods" :key="index">
                <van-row>
                  <van-col span="3">
                      <van-checkbox v-model="item.select" checked-color="#f70"></van-checkbox>
                  </van-col>
                  <van-col span="18" style="display: flex;">
                      <div style="width: 35%;">
                          <img :src="item.img_url" width="100%">
                      </div>
                      <div style="width: 50%; font-size:0.28rem;color: #666;">
                          <p style="line-height: 0.6rem;">{{item.name}}</p>
                          <p style="line-height: 0.6rem;">售价：{{item.price}}元</p>
                          <van-stepper v-model="item.num" min="1" :max="item.buy_limit" />
                      </div>
                  </van-col>
                  <van-col span="3">
                    <!-- 
                    通过$store.commit调用mutation方法
                    参数：mutation方法名  传递的参数
                    -->
                    <!-- <van-icon
                    name="delete-o"
                    @click="$store.commit('delCart',item)"
                    /> -->
                    <van-icon
                    name="delete-o"
                    @click="delCart(item)"
                    />
                  </van-col>
                </van-row>
            </div>
        </div>
        
        <div class="water">
            <div class="item"></div>
            <div class="item itema"></div>
            <div class="item"></div>
            <div class="item itemb"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item itema"></div>
            <div class="item itema"></div>
            <div class="item"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item itema"></div>
            <div class="item itemb"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item itema"></div>
            <div class="item"></div>
            <div class="item itema"></div>
            <div class="item"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item itema"></div>
            <div class="item itemb"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item itema"></div>
            <div class="item"></div>
            <div class="item itema"></div>
            <div class="item"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item itema"></div>
            <div class="item itemb"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item itemb"></div>
            <div class="item"></div>
            <div class="item itema"></div>
            <div class="item"></div>
            <div class="item"
            v-for="(item,index) in len"
            :class="{'itemb':index%2 == 0}"></div>
        </div>
        
        
        
        <div class="footer" style="display: flex; position:fixed; bottom:0; width:100%">
            <div style="flex: 1;">
                <p style="font-size: 0.24rem;color:#666;">共{{carNum}}件，金额：</p>
                <p style="font-size: 0.24rem;color:#666"><span style="font-size: 0.5rem; color:#f70">{{totalPrice}}</span>元</p>
            </div>
            <div style="flex:1; background-color:#eee;font-size: 0.24rem; color:#000; text-align:center; line-height:1rem">
                继续购物
            </div>
            <div style="flex:1; background-color:#f70;font-size: 0.24rem; color:#fff; text-align:center; line-height:1rem">
                去结算
            </div>
        </div>
        
    </div>
</template>

<script>
import waterfall from "../utils/waterfall.js"
// 引入vuex 的映射方法
// state和getters是数据 放在computed里面
// mutations和actions是方法  放在methods里面
import { mapState,mapGetters,mapMutations,mapActions } from "vuex"
export default{
    data(){
        return {
            len:4,
            flag:true
        }
    },
    computed:{
        // 使用vuex映射
        ...mapState({
            userInfo:state=>state.user.userInfo
        }),
        ...mapState(['goods','info']),
        ...mapGetters(["totalPrice","carNum"])
    },
    methods:{
        ...mapMutations(['delCart']),
        ...mapActions(['getCart']),
        water(){
            console.log(123)
            waterfall(".water",".item",3,10)
        },
        getMore(){
            this.flag = false
            console.log('到底了')
            setTimeout(()=>{
                this.len += 50
                // 当vue dom 节点渲染完成后自动触发的事件
                this.$nextTick(()=>{
                    this.water()
                    this.flag = true
                })
            },300)
        },
        // 触底事件
        reachBottom(){
            // 用vue的方法获取dom节点
            // console.log(this.$refs.cart)
            // console.log("1111")
            // 获取最后一个dom节点到底部的距离 来判断是否触底
            var last = [...document.querySelectorAll('.item')].pop()
            // console.log(last)
            var winH = window.innerHeight;
            if(last.getBoundingClientRect().top<winH && this.flag){
                this.getMore()
            }
        }
        
        
    },
    // dom节点操作的方法应该在组件挂在完成后执行
    mounted(){
        // this.getCart()
        this.water()
        window.addEventListener("resize",this.water)
        // this.reachBottom()
        this.$refs.cart.addEventListener('scroll',this.reachBottom)
    },
    beforeDestroy(){
        console.log('销毁')
        window.removeEventListener("resize",this.water)
        this.$refs.cart.removeEventListener('scroll',this.reachBottom)
    }
}
</script>

<style scoped>
    .item{
        background-color: #999;
        height: 80px;
    }
    .itema{
        height: 200px;
    }
    .itemb{
        height: 230px;
    }
</style>
 

until 封装

/**
 * @name 瀑布流插件
 * @param { parent } dom 瀑布流的父节点
 * @param { son } 瀑布流子节点
 * @param { col } 瀑布流有几列
 * @param { gap } 子节点的间距
 */

function waterfall (parent, son, col, gap) {
    // 获取父节点
    var con = document.querySelector(parent);
    // 父节点相对定位
    con.style.position = "relative";
    // 获取所有的子节点
    var items = document.querySelectorAll(son);
    // 定义一个数组用于记录每列的最小值
    var arr = [];
    // 控制有几列
    arr.length = col
    // 数组填充0
    arr.fill(0)
    // 定义每个子元素的宽度
    var w = (con.offsetWidth-(col+1)*gap) / col
    for(var i = 0;i<items.length;i++){
        items[i].style.position = "absolute";
        items[i].style.width = w+"px";
        // 查找最小数据
        var min = Math.min(...arr)
        // 最小数据的下标  也就是第几列
        var minIndex = arr.indexOf(min)
        items[i].style.top = min + "px"
        items[i].style.left = (minIndex * w + (minIndex+1)*gap) + "px"
        // 修改arr的最小值
        arr[minIndex] = min + items[i].offsetHeight + gap
        con.style.height = arr[minIndex] + "px"
    }
}
export default waterfall