瀑布流复盘

视图层代码

// 瀑布流逻辑： 通过Window.getComputdStyle(dom,null).getPropertyValue('height')监听左右两对象的高度，哪个组件的高度小，就把哪个数据插入到那个dom对象里
// 整个组件的外层容器
<ul class = "flowBox">
    // 定义列数
    <li 
        v-for = "(item , index) of list"
        :id = "index"
        :key = "index"
    >
        // 渲染左边和右边的数据
        <div
            v-for = "data of item"
            :key="data.id"
            class="listItem"
        >
        </div>
    </li>
</ul>
<div v-if="ifLoading">加载中</div>
<div v-else-if>-没有更多了-</div>

vue 逻辑代码

list:[[],[]],
isLoading: false,
isMore: true

renderList(res) {
    for(let i = 0; i<this.dataList.length ; i++) {
        let leftHeight = parseIn(Window.getComputedStyle(leftList, null).getPropertyValue('heught'));
        let rightHeight = parseIn(Window.getComputedStyle(rightList,null)).getPropertyValue('height');
    // 图片预加载
    if(this.dataList[i].ext) {
        await this.loading(this.dataList[i].ext.picture);
    }
    // 当左右两边的高度为0时
    if(letftListHeight === 0 && rightListHeight === 0) {
        letftListHeight = leftList.offsetHeight;
        rightListHeight = rightList.offsetHeight;
    } 
    if(leftListHeight === rightListHeight) {
        this.list[0].push(this.dataList[i]);
    }
    if(leftListHeight > rightListHeight) {
        this.list[1].push(this.dataList[i]);
    }
    if(leftListHeight < rightListHeight) {
    this.list[0].push(this.dataList[i]);
    }
    // 自己的评论放左边
    if(!this.hasAddMin && res && res.length > 0) {
        this.hasAddMine = true;
        this.list[0].unshift(res[0]);
    }
    this.list = [...this.list];
    this.ifLoading = true
    await this .$nextTick();
    
    }
}

// 图片懒加载
loadImg(url) {
    return new Promise((resovle,reject)=> {
        let img = new Image();
        img.addEventListener('load',(e)=> {
            resolve(img.height);
        });
        img .addEventListener('error',()=> {
            reject(200);
        });
        img.src
    })
}

// 滚动到一定距离加载数据
scrollFn() {
    // 滚动的高度
    let scrollHeight = $container.scrollHeight;
    // 盒子的高度
    let clientHeight = $container.clientHeight;
    // 距离顶部的距离
    let scrollTop = $container.scrollTop;
    if(scrollHeight -parseInt(clientHeight + scrollTop)) {
       // 这里请求接口
    }
}