什么是瀑布流

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

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


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