vue 封装 瀑布流

utils/waterfall.js

/**
 * @description 瀑布流方法
 * @param {String} selector = [.item] 瀑布流的选择器
 * @param {Number} column = [2] 栏的数量,默认2列
 * @param {Number} gap = [10] 栏间距
 * @param {document|HTMLElement}  = [document] 瀑布流参照父节点
 */
function waterFall(selector=".item",column=2,gap=10,parent=document){
                // 分两栏
                // var column = 2;
                // 间距
                // var gap = 10;
                // 列宽 一列的宽度(动态计算间距)
                var width = window.innerWidth;
                if(parent!=document){
                    parent.style.position ="relative";
                    width = parent.offsetWidth;
                }
                var colWidth = (width-(column+1)*gap)/column;
                // 数组存储高度（记录最小高都）
                var arr = [];
                // 设置数组长度
                arr.length = column;
                // 填充初始值为0;（默认值为0）
                arr.fill(0);
                // 获取所有的item
                
                var items = parent.querySelectorAll(selector);
                // 遍历items
                for(var i=0;i<items.length;i++){
                    // 绝对定位
                    items[i].style.position = "absolute";
                    // 设置宽
                    items[i].style.width = colWidth+"px";
                    // 找到arr数组的最小的列
                    var min = Math.min(...arr);
                    // 数组最小列的下标
                    var minIndex = arr.indexOf(min);
                    // 动态算出left和top值
                    // 如果minINdex值是0// left = 0*10+10+172.5*0+"px" 10px                    
                    // 如果minIndex值1 // left = 1*10+10+172.5*1+"px"192.5px                    
                    items[i].style.left= minIndex*gap+gap+colWidth*minIndex+"px";
                    items[i].style.top = arr[minIndex]+gap+"px";
                    // 获取元素的高
                    var h = items[i].offsetHeight;                 
                    // 更新minIndex的值 = 原来的值+元素的高+间距
                    arr[minIndex]=arr[minIndex]+h+gap;
                    
                }
            
}
export default waterFall;

页面中引用

<template>
    <div>
        <div class="list" ref="list">
            <div class="item" v-for="(item,index) in joks" :key="index">
                <h3>{{item.title}}</h3>
                <p>{{item.summary}}</p>                
            </div>
        </div>
    </div>
</template>
<script>
    import waterFall from '@/utils/waterFall.js' 
    export default {
        data(){
            return {
                joks:[],
                page:1,
                flag:true,
            }
        },
        created(){
            this.getJok();
        },
        methods:{
            getJok(){
                this.flag = false;
                // 使用全局方法
                this.$request.get("http://520mg.com/mi/list.php?page="+this.page)
                .then(res=>{
                    this.joks = this.joks.concat(res.data.result)
                    this.flag = true;
                    this.page++;
                    // 等待dom渲染后在执行waterfall
                    this.$nextTick(()=>{
                        // this.waterFall(2,10,this.$refs.list);
                        // this.waterFall(3,5);
                        waterFall(".item",3,10);
                    })
                })
            },
            
            
        }
    }
    
</script>

<style>
.item{
    border:1px solid #ccc;
    background-color: #fff;
    padding: .15rem;
    
}
.list{
    /* height:800px; */
    overflow: auto;
}
</style>