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

什么是瀑布流

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

博主在浏览各个网站总是看到这样的网页布局，它们的布局像瀑布流水一般，瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个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>

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>

js代码

<script>import $ from "jquery"export default {name: "Pu",mounted() {setTimeout(()=>{//需要dom加载完成才可以执行瀑布流jsthis.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{//非第一行操作，将此次图片定位到高度最低的一列//获取高度数组中的最小值,即所有列中最小的一列，是此次图片定位的起始高度，即toplet minBoxHeight=Math.min(...heightArr);//获取最小高度对应的列索引,$.inArray()用于查找对应数组中指定值的索引。(未匹配成功的话，返回-1)//从而可以判断出此次图片定位的起始leftlet 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>

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

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>

js代码

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

最终效果

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

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