高性能的两列瀑布流

最新推荐文章于 2024-07-24 11:13:53 发布

好好珍惜丶

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量905

点赞数 1

分类专栏： vue 文章标签：前端 javascript css vue.js html

本文链接：https://blog.csdn.net/weixin_45424044/article/details/129046950

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

分享一下困扰了很久的瀑布流功能

完成思路
1.两列的瀑布流，需要两列容器，容器需要用定位来实现，这样才能保证瀑布流的成型
2.将数据源存储在一个变量中，给里面的每条数据添加高度（height必填）、唯一标识（id必填) 和其他需要的字段
3.定义左右容器的变量，各自存储左右所需要的数据
4.将源数据通过遍历的形式，对比两侧高度差，来决定此条数据存储到哪个变量中

页面布局代码html

<body>
    <div id="app">
        <div class="water">
            <div class="waterLeft">
                <div class="itemLeft" :style="{height:item.height+'px',backgroundColor:item.color}" v-for="(item,index) in listLeft" :key="item.id">
                </div>
            </div>
            <div class="waterRight">
                <div class="itemRight" :style="{height:item.height+'px',backgroundColor:item.color}" v-for="(item,index) in listRight" :key="item.id">
                </div>
            </div>
        </div>
    </div>
</body>

样式很简单，可以自己写需要的样式，样式代码css

  #app {
        /* display: flex; */
        /* flex-wrap: wrap; */
        overflow: hidden;
    }
        .waterLeft {
        position: absolute;
        left: 0;
        width: 48%;
        top: 0;
        display: flex;
        flex-direction: column;
    }
    
    .waterRight {
        position: absolute;
        right: 0;
        width: 48%;
        top: 0;
    }
    
    .itemLeft,
    .itemRight {
        margin-bottom: 10px;
        border-radius: 10px;
        overflow: hidden;
    }

js代码片段（vue）

new Vue({
        el: "#app",
        data: {
            // 源数据
            list: [],
            // 左列元素集合
            listLeft: [],
            // 右列元素集合
            listRight: [],
            // 瀑布流的id序号
            id: 1,
        },
        created() {
            // 初始化源数据
            this.dataSource(this.list);
        },
        methods: {
            // 将源数据分为左右两列
            spiltList() {
                this.listLeft = [];
                this.listRight = [];
                // 定义变量，接受list数据源
                let list = this.list;
                // 定义左右两侧初始化高度
                let leftAllHeight = 0,
                    rightAllHeight = 0,
                    data = {};
                for (let i = 0; i < list.length; i++) {
                    data = list[i];
                    if (leftAllHeight <= rightAllHeight) {
                        this.listLeft.push(data);
                        leftAllHeight += data.height;
                    } else {
                        this.listRight.push(data);
                        rightAllHeight += data.height;
                    }
                }
            },

            // 初始化瀑布流源数据,data源数据，pushData需要将其添加到源数据里面的数据
            dataSource(data,pushData) {
                // 是否循环结束
                let flag = true;
                while (flag) {
                    data.push({
                        id: this.id,
                        height: Math.round(Math.random() * (250 - 160)) + 160,
                        color: this.randomColor(),
                        // 图片可以用自己的图片，动态设置也可以
                        image: "./图片懒加载/ruiwen.jpg",
                    });
                    this.id++;
                    if (this.id % 10 == 0) {
                        flag = false;
                    }
                }

                // 动态的添加数据，参考此处
                // let i=0,length = pushData.length;
                // while (i>=length) {
                //     data.push({
                //         id: this.id,
                //         height: Math.round(Math.random() * (250 - 160)) + 160,
                //         listIndex: this.id,
                //         color: this.randomColor(),
                //         // 图片可以用自己的图片，动态设置也可以,其他数据也可以动态设置
                //         image: pushData[i].img
                //     });
                //     this.id++;
                //     i++;
                // }
                this.spiltList();
            },
            // 获取随机颜色
            randomColor() {
                let col = "#";
                for (let i = 0; i < 6; i++)
                    col += parseInt(Math.random() * 16).toString(16);
                return col;
            },
            // 防抖
            debunce() {
                if (this.timer) {
                    clearTimeout(this.timer);
                    this.scroll = false;
                    this.timer = null
                }
                this.timer = setTimeout((res) => {
                    this.scroll = true;
                }, 200);
            },
        },

        mounted() {
            window.addEventListener("scroll", (res) => {
                var scrollTop =
                    document.documentElement.scrollTop || document.body.scrollTop;
                var windowHeight =
                    document.documentElement.clientHeight || document.body.clientHeight;
                var scrollHeight =
                    document.documentElement.scrollHeight || document.body.scrollHeight;
                //滚动到底部触发
                if (Math.round(scrollTop) + windowHeight > scrollHeight-5) {
                    //写后台加载数据的函数
                    console.log("到顶部");
                    this.dataSource(this.list);
                }
            });
        },
    });

实现效果

瀑布流视频

如果有什么不对，欢迎指正
希望对您有所帮助！！！

好好珍惜丶

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
高性能的两列瀑布流

1.两列的瀑布流，需要两列容器，容器需要用定位来实现，这样才能保证瀑布流的成型2.将数据源存储在一个变量中，给里面的每条数据添加高度（height必填）、唯一标识（id必填) 和其他需要的字段3.定义左右容器的变量，各自存储左右所需要的数据4.将源数据通过遍历的形式，对比两侧高度差，来决定此条数据存储到哪个变量中
复制链接

扫一扫