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