一小时，学习掌握瀑布流页面布局_瀑布流式页面布局

什么是瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。其实瀑布流的特点就是参差不齐的排列方式，以及流式布局的扩展性，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动。

博主在浏览各个网站总是看到这样的网页布局，它们的布局像瀑布流水一般，瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作，对于用户的体验感来说是接近于满分的！

项目效果图

瀑布流原理分析

1-瀑布流元素的宽度是等宽的
2-通过分析瀑布流盒子和瀑布流元素宽度，设置瀑布流列数
3-瀑布流又可以成为找短补位，什么意思呢？即通过比较每列高度，获取最低的列和列高，作为本次瀑布流补位的位置，以此类推直至结束。
4-如上所说，比较高度，我们需要一个存储高度的东西，即高度数组let heightArr=[]，每次补位完还要追加高度，定位当然要用到我们css定位了position: relative;，position:absolute
5-除去第一行不用定位直接存高度数组之外，其他都需要，而在此之前主要找到位置，即找到最低列高和此列高对应列数，我们可以使用Math.min(数组序列)找到最低列高，通过$.inArray(最低列高，高度数组)来找到此列。
6-详细代码如下

静态瀑布流的代码实现与注释解释

vue代码

<template>
    <div class="container">
        <div class="img-box"><!--静态-->
            <div class="img-item">
                <img src="../assets/img_1.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_2.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_3.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_4.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_5.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_6.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_7.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_8.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_9.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_10.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_11.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_12.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_13.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_14.jpg" alt="">
            </div>
            <div class="img-item">
                <img src="../assets/img_15.jpg" alt="">
            </div>
        </div>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

css代码

<style scoped lang="scss">
    *{
        margin: 0;
        padding: 0;
        list-style: none;
        outline: none;

        .container{
            width: 100%;

            .img-box:before,.img-box:after{/*清除浮动*/
                content: "";
                display: block;
                clear: both;
            }
            .img-box{
                width: 1200px;
                margin: 0 auto;
                background: black;
                position: relative;

                .img-item:nth-of-type(5n){/*博主设置为5列，第五列不设置右外边距，防止宽度溢出换行*/
                    margin-right: 0;
                }
                .img-item{
                    /*盒子1200px，5列，每两列之间间距为10px,剩余宽度/5就是每个瀑布流图片的宽度*/
                    width: calc((1200px - 40px) * 0.2);
                    margin-right: 10px;/*右外间距，之后js设置需要注意*/
                    float: left;
                    overflow: hidden;

                    img{
                        width: 100%;
                    }
                }
            }
        }
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

js代码

<script>
    import $ from "jquery"
    export default {
        name: "Pu",
        mounted() {
            setTimeout(()=>{//需要dom加载完成才可以执行瀑布流js
                this.waterFall()
            },50)
        },
        data(){
            return{

            }
        },
        methods:{
            waterFall(){//瀑布流核心代码
                let img=$(".img-item");//获取图片集合
                let imgWidth=$(".img-item").width();//当前图片宽度
                let boxWidth=$(".img-box").width();//瀑布流展示框宽度
                let cols=parseInt(boxWidth/imgWidth);//求出列数
                let heightArr=[];//创建高度数组，用于存储各行当前高度
                // 遍历图片集合
                $.each(img,function(index,item)
                {
                    let imgHeight=$(item).height();//取出对应图片的高度
                    if(index<cols){//判断是不是第一行,第一行索引0~cols-1,
                        //第一行直接存入高度数组
                        heightArr[index]=imgHeight;
                    }else{
                        //非第一行操作，将此次图片定位到高度最低的一列
                        //获取高度数组中的最小值,即所有列中最小的一列，是此次图片定位的起始高度，即top
                        let minBoxHeight=Math.min(...heightArr);
                        //获取最小高度对应的列索引,$.inArray()用于查找对应数组中指定值的索引。(未匹配成功的话，返回-1)
                        //从而可以判断出此次图片定位的起始left
                        let minBoxIndex=$.inArray(minBoxHeight,heightArr)
                        //图片定位插入对应位置
                        $(item).css({
                            position:'absolute',
                            //加10是因为css设置了右外边距
                            left:minBoxIndex*(imgWidth+10)+'px',
                            //加6是为了让间距相同，视觉舒适
                            top:minBoxHeight+6+'px'
                        })
                        //高度追加，存入高度数组
                        heightArr[minBoxIndex]+=imgHeight+6;
                    }
                })
                //获取每次执行完的最大高度，用于设置瀑布流盒子高度
                //因为瀑布流图片设置绝对定位而使，盒子高度塌陷
                //最后执行完就是整个瀑布流盒子的高度
                let maxBoxHeight=Math.max(...heightArr);
                $(".img-box").css("height",maxBoxHeight);
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

模拟前后端交互瀑布流实现

vue代码

<template>
    <div class="container">
        <div class="img-box"><!--模拟数据库动态-->
            <div class="img-item" v-for="item in list" :key="item.id">
                <img :src="item.url" alt="">
            </div>
        </div>
        <button @click="more">查看更多<i class="el-icon-arrow-right"></i></button>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10

js代码

mounted() {
     let img=this.ren[this.index];//这里实际项目是请求接口
     for (let e of img){
         this.list.push(e);//初始化数据
     }
     setTimeout(()=>{//需要dom加载完成才可以执行瀑布流js
         this.waterFall()
     },50)
},

data(){
    return{
      list:[],//瀑布流数组
      ren:[//模拟图片数据库数据
           [
            {
             id:1,
             url:require("../assets/img_1.jpg"),
            },
           ],
           [
            {
             id:22,
             url:require("../assets/img_2.jpg"),
            },
           ],
          [
           {
            id:35,
            url:require("../assets/img_5.jpg"),
            },
           ],
          ],
      index:0,//索引，相当于实际的页数
    }
 },
 methods:{
            more(){//展示更多事件
                $("i").removeClass("el-icon-arrow-right");
                $("i").addClass("el-icon-loading");//开始展示加载
                setTimeout(()=>{//实际数据请求会有延迟，这里也模拟一下
                    this.index++;//索引自增
                    if(this.index<this.ren.length) {
                        let img = this.ren[this.index];//这里实际项目是请求接口
                        for (let e of img) {
                            this.list.push(e);//在现有瀑布流基础上增加
                        }
                        setTimeout(() => {//需要dom加载完成才可以执行瀑布流js
                            this.waterFall()
                        }, 50)
                    }else{//没有更多数据了
                        this.index=this.ren.length-1;
                        this.$message({
                            message: '没有更多的内容了。',
                            type: 'warning'
                        });
                    }
                    $("i").removeClass("el-icon-loading");
                    $("i").addClass("el-icon-arrow-right");//换回普通图标
                },1000)
            },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

最终效果

参考博客https://blog.csdn.net/solo_1108/article/details/107123271


以上是博主对瀑布流页面布局的学习与应用情况，过程中还有许多不足，希望小伙伴们谅解，如发现问题或者博客中的错误，可与博主进行交流，谢谢大家阅读~~
——————谢谢————