什么是瀑布流
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。其实瀑布流的特点就是参差不齐的排列方式,以及流式布局的扩展性,可以通过界面展示给用户多条数据,并且让用户可以有向下浏览的冲动。
博主在浏览各个网站总是看到这样的网页布局,它们的布局像瀑布流水一般,瀑布流布局在我们现在的前端页面中经常会用的到,它可以有效的降低页面的复杂度,节省很多的空间,对于整个页面不需要太多的操作,只需要下拉就可以浏览用户需要看到的数据;并且,在当前这个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)},},
最终效果
参考博客/solo_1108/article/details/107123271
以上是博主对瀑布流页面布局的学习与应用情况,过程中还有许多不足,希望小伙伴们谅解,如发现问题或者博客中的错误,可与博主进行交流,谢谢大家阅读~~
——————谢谢————