实现瀑布流布局的四种方法
文章目录
- 一、 什么是瀑布流布局
- 1.是什么
- 2.特点
- 二、有什么优缺点
- 1.优点
- 2.缺点
- 三、实现方法
- 法一、纯css的写法:【multi-column 多栏布局】
- 1.两个重要属性
- 2.特点
- 3.缺点
- 4.注意点:
- 5.实现的代码模式(以下用vue3.0来书写)
- 法二、泳道的思想:【用flex弹性布局+计算元素高度实现布局】
- 1.原理的分析
- 2.算法思路:通过上面的分析则能了解瀑布流的思路了
- 3.代码实现思路
- 4.代码实现(以下用vue3.0来实现)
- 法三、绝对定位实现:【精确计算每个子元素绝对定位到瀑布流它应该去的地方,需要后期一些优化,并不推荐使用】
- 1.缺点
- 2.实现的原理
- 3.代码实现思路
- 4.代码实现(vue3.0来实现)
- 法四、插件实现:【用插件vue-waterfall2 不是很建议使用,一般用于图片的加载,但是复杂的业务就不是很ok了】
- 1.安装依赖
- 2.引入
- 3.相关api
- 4.代码实现
一、 什么是瀑布流布局
1.是什么
- 页面上是一种 参差不齐 的多栏布局,类似上图所示随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部,大部分为图片,图片 固定 宽度,高度 不一,根据原比例缩放到宽度达到固定的要求,每行排满后,新的图片添加到后面
2.特点
- 固定宽度,高度不一
- 岑参不齐的布局
- 以图片为主
二、有什么优缺点
1.优点
- 节省空间:降低页面的复杂
- 对于 触屏设备非常友好:通过向上滑动浏览,交互方式更符合直觉
- 良好的视觉体验:浏览时不会被页面整整齐齐的高度影响,参差不齐,降低浏览的疲劳
2.缺点
- 内容总长度 无法掌握
- 数据过多时,容易造成页面 加载的负荷
- 再次加载时 很难定位上一次浏览的内容
三、实现方法
法一、纯css的写法:【multi-column 多栏布局】
1.两个重要属性
column-count : 定义列数
column-gap :列与列之间的间隔
2.特点
顺序只能是 从上到下, 再左到右
3.缺点
由于排列顺序是先 从上到下, 再左到右,只能用于数据固定, 无法动态的加载追加,对于滚动到底部加载新数据则无法实现。
4.注意点:
有时候页面会出现在前几列的最后一个元素的内容被自动断开,一部分在当前列尾,一部分在下一列的列头。这时候子元素可以用 break-inside设置为不被截断 avoid来控制
break-inside: avoid; // 不被截断 默认值是auto,会被截断
5.实现的代码模式(以下用vue3.0来书写)
- template
<template><div class="page-main"><div class="card"><div class="card-item" v-for="(item,index) in cardList" :key="index" :style="[{background: item.color},{height: item.height},{lineHeight: item.height}]"><p class="text">{{index}}</p></div></div></div>
</template>
- script
<script setup>
import {ref} from 'vue'
const cardList = ref([ // 模拟数据{color: '#FCCF0A',height: '100px',},......
])
</script>
- style multi-column 实现
<style lang="scss" scoped>
.page-main{background: #ffffff;min-height:100vh;padding: 0 30px;.card{column-count: 3; // 定义三列column-gap: 20px; // 列与列的距离为20px.card-item{text-align: center;width: 216px;border-radius: 16px;grid-row-start: auto;margin-bottom: 20px;break-inside: avoid; // 不被截断}}
}
</style>
法二、泳道的思想:【用flex弹性布局+计算元素高度实现布局】
泳道的概念:通俗的说是类似泳道一样,先设置泳道列数,一列一列的,然后往里加东西,就自动往下面走了。
1.原理的分析
- 适用范围:基本业务都能实现
- 首先比如有四个元素了,并且设置四列
- 那么第五个位置在哪里呢
- 答案: 是下面图的位置上,找到的位置应该高度为所有列中最小的位置
- 第六个的位置呢,答案还是和上面一样的所示 找到高度为所有列中最小的位置,则为下面的位置
2.算法思路:通过上面的分析则能了解瀑布流的思路了
- 设计要分成的列数
- 设置每列的 宽度一致
- 每次插入的位置选择所有列高度最小 的位置,依次循环
3.代码实现思路
- 由于需要拿到每个数据的dom元素的实际值,则需要先对数据进行赋值,这样就可以拿到所有的元素dom上的高度
- 则渲染时候对数据的两次赋值,则会出现一次闪现,需要防抖 ,可以先将卡片设置为visibility:hidden ,当后面对数据处理完,重新渲染后再将卡片设置为visibility:visible
- 多少列则定义多少新的空数组,然后根据瀑布流的思路依次插入 到空的数组即可,最后再重新渲染页面即可
4.代码实现(以下用vue3.0来实现)
- template (例子为三列)
<template><div class="page-main"><div class="card"><div class="coloum1" ><div class="card-item" v-for="(item,index) in cardList1" :key="index" :style="[{background: item.color},{height: item.height},{lineHeight: item.height}]" :class="{visibles: isVisibility}"><p class="text">{{item.num}}</p></div></div><div class="coloum2"><div class="card-item" v-for="(item,index) in cardList2" :key="index" :style="[{background: item.color},{height: item.height},{lineHeight: item.height}]" :class="{visibles: isVisibility}"><p class="text">{{item.num}}</p></div></div><div class="coloum3"><div class="card-item" v-for="(item,index) in cardList3" :key="index" :style="[{background: item.color},{height: item.height},{lineHeight: item.height}]" :class="{visibles: isVisibility}"><p class="text">{{item.num}}</p></div></div></div></div>
</template>
- js
<script setup>
import {ref,onMounted, reactive,nextTick} from 'vue'
const cardList = reactive([ // 测试数据{num: '0',color: '#FCCF0A',height: '100px',}, ...测试数据
])const isVisibility = ref(true)
// 由于渲染时候对数据的两次赋值,则会出现一次闪现,需要防抖onMounted(()=>{equallyCard()nextTick(()=>{caLFlex()}).then(()=>{isVisibility.value = true})
})const cardList1 = ref([]) // 各列的数据
const cardList2 = ref([])
const cardList3 = ref([])function equallyCard(){// 平分数据,确保页面上遍历卡片dom的真实顺序与平分的一致 document.querySelectorAll('.card-item'))let num = parseInt(cardList.length/3)cardList.forEach((item,index)=>{if(index<num){cardList1.value.push(item)return}if(index<2*num){cardList1.value.push(item)return}cardList3.value.push(item)})
}function caLFlex(){let arr1 = [] // 第一列的值let arr2 = [] // 第二列的值let arr3 = [] // 第二列的值let heightArry_1 = [] // 第一列的卡片高度let heightArry_2 = [] // 第二列的卡片高度let heightArry_3 = [] // 第二列的卡片高度Array.from(document.querySelectorAll('.card-item')).forEach((item,index) =>{if(index === 0){ // 第一行中的元素无需判断,直接加到新的数组中heightArry_1.push(item.offsetHeight)arr1.push(cardList[index])return}if(index === 1){heightArry_2.push(item.offsetHeight)arr2.push(cardList[index])return}if(index === 2){heightArry_3.push(item.offsetHeight)arr3.push(cardList[index])return}const heightTotal_1 = heightArry_1.length ? Array.from(heightArry_1).reduce(( acc, cur ) => acc + cur) : 0 // 第一列的总高度const heightTotal_2 = heightArry_2.length ? Array.from(heightArry_2).reduce(( acc, cur ) => acc + cur) : 0 // 第二列的总高const heightTotal_3 = heightArry_3.length ? Array.from(heightArry_3).reduce(( acc, cur ) => acc + cur) : 0 // 第三列的总高度// 找到最小值let minNumber = Math.min(heightTotal_1,heightTotal_2,heightTotal_3)switch (minNumber) {case heightTotal_1:heightArry_1.push(item.offsetHeight)arr1.push(cardList[index])breakcase heightTotal_2:heightArry_2.push(item.offsetHeight)arr2.push(cardList[index])breakcase heightTotal_3:heightArry_3.push(item.offsetHeight)arr3.push(cardList[index])break}})// 重新将数据赋值给各列数组cardList1.value = arr1cardList2.value = arr2cardList3.value = arr3
}
- css
<style lang="scss" scoped>
.page-main{background: #ffffff;height:100vh;overflow: hidden;padding: 0 30px;.card{display: flex;flex-direction: row;justify-content: space-around;.card-item{visibility: hidden;margin-bottom: 20px;text-align: center;width: 216px;border-radius: 16px;}.visibles {visibility: visible;}}
}
</style>
法三、绝对定位实现:【精确计算每个子元素绝对定位到瀑布流它应该去的地方,需要后期一些优化,并不推荐使用】
1.缺点
- 计算量相比较 大,较复杂
- 会有高度塌陷问题
- 子元素因为设置了 absolute并不会占高,页面可滚动的话又会产生另外的问题
- 如果在移动端中会做适配,当前的绝对定位的高度单位在代码实现若为px 并不会自动换算
- 当视口的窗口resize改变,需要重新计算元素的位置,若会不断触发事件,性能消耗大,加载也慢,这是不可取的
2.实现的原理
- 通过>精准的计算每个子元素的位置,定位到瀑布流应该去的地方
3.代码实现思路
- 子元素全部设置成绝对定位
- 找到所有列中>最小的位置
- 计算子元素定位时的 top 以及left
- 修改子元素的样式,设置position为absolute ,以及设置top ,left
- 每次插入的位置选择所有列高度最小 的位置,依次循环
4.代码实现(vue3.0来实现)
- template
<template><div class="page-main"><div class="card"><div class="card-item" v-for="(item,index) in cardList" :key="index" :style="[{background: item.color},{height: item.height},{lineHeight: item.height}]" :class="{visibles: isVisibility}"><p class="text">{{item.num}}</p></div></div></div>
</template>
- script
以下是一些代码说明
1、 coloumHight [0,0] 为两列,coloumHight [0,0,0] 为三列
2、 getMinColoumHeight方法: 找到最小列
<script setup>
import {onMounted, reactive, ref} from 'vue'
const cardList = reactive([ // 测试数据{num: '0',color: '#FCCF0A',height: '100px',},...测试数据
])const isVisibility = ref(false)
// 由于渲染时候对数据的两次赋值,则会出现一次闪现,需要防抖onMounted(()=>{caLFlex()
})function caLFlex(){let coloumHight = [0,0,0] // 每列元素的高度,本例子为3列// 依次插入每个元素Array.from(document.querySelectorAll('.card-item')).forEach((item,index) =>{let coloum = getMinColoumHeight(coloumHight) // 得到当前所有最小高度的一列let itemTop = coloumHight[coloum]let itemLeft = coloum * 200item.style.position = "absolute"item.style.top = `${itemTop}px`item.style.left = `${itemLeft}px`// 当前高度加上新增的元素高度coloumHight[coloum] += item.offsetHeight})isVisibility.value = true
}// 找到所有列中高度最小的一列
function getMinColoumHeight(arr){let min = Math.min(...arr)return arr.indexOf(min) !== -1 ? arr.indexOf(min) : 0 // 默认第一列
}
</script>
- style
<style lang="scss" scoped>
.page-main{background: #ffffff;height:100vh;overflow: hidden;padding: 0 30px;.card{position: relative;.card-item{width: 200px;text-align: center;visibility: hidden;}.visibles {visibility: visible;}}
}
</style>
法四、插件实现:【用插件vue-waterfall2 不是很建议使用,一般用于图片的加载,但是复杂的业务就不是很ok了】
1.安装依赖
npm i vue-waterfall2@latest --save
2.引入
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
3.相关api
4.代码实现
<template><div class="container-water-fall"><waterfall:col="col":data="data"@scroll="scroll"@finish="finish":height="'100vh'"><template><divclass="cell-item"v-for="(item, index) in data":key="index"><img v-if="item.img" :src="item.img" alt="加载错误" /><div class="item-body"><div class="item-desc">{{ item.title }}</div><div class="item-footer"><divv-if="item.avatar"class="avatar":style="{backgroundImage: `url(${item.avatar})`,}"></div><div class="name">{{ item.user }}</div><divclass="like":class="item.liked ? 'active' : ''"><i></i><div class="like-total">{{ item.like }}</div></div></div></div></div></template></waterfall></div>
</template><script>
import json from "./components/data.json";
export default {name: "App",/*注意:1. gutterWidth需要与width一起使用才会生效,否则会进行自适应宽度(使用rem布局时,需先计算出自适应后的宽度再传值)2. 使用了`waterfall`的父组件,如果样式存在问题,可去掉css `scoped`尝试一下
*/data() {return {data: [{img:"https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "最近浴室新宠,日系神仙好物了解一下~",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/5c3e51e4.jpg?w=720&h=960&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "真的是万能.超级实用.包包必备单品! ! !",user: "迷人的小妖精迷人的小妖精",like: "952",},{img:"https://image.watsons.com.cn//upload/bef41e67.JPG?w=712&h=534&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品,这些护肤好物必须交出来!",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/13afe9a7.jpg?x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用这款姨妈巾,让你体验真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/642cb83c.jpeg?w=1080&h=1080&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title:"贵妇级好用的水乳有哪些呢?千万不要去乱尝试贵妇级好用的水乳有哪些呢?千万不要去乱尝试贵妇级好用的水乳有哪些呢?千万不要去乱尝试",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/98c7c4c3.jpg?w=1210&h=1210&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title:"贵妇级好用的水乳有哪些呢?千万不要去乱尝试贵妇级好用的水乳有哪些呢?千万不要去乱尝试贵妇级好用的水乳有哪些呢?千万不要去乱尝试",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/25ab20fe.JPG?w=1000&h=1200&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "夏天用这款姨妈巾,让你体验真正的清爽",user: "迷人的小妖精迷人的小妖精",like: "953",},{img:"https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080",avatar:"https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",title: "150元搞定全套护肤品,这些护肤好物必须交出来!",user: "迷人的小妖精迷人的小妖精",like: "953",},],col: 2,};},computed: {itemWidth() {return 138 * 0.5 * (document.documentElement.clientWidth / 375); //rem布局 计算宽度},gutterWidth() {return 9 * 0.5 * (document.documentElement.clientWidth / 375); //rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)},},methods: {scroll(scrollData) {console.log(scrollData);},switchCol(col) {this.col = col;console.log(this.col);}},
};
</script><style>
* {margin: 0;
}
.cell-item {width: 100%;margin-bottom: 10px;background: #ffffff;border: 2px solid #f0f0f0;border-radius: 12px 12px 12px 12px;overflow: hidden;box-sizing: border-box;
}
img {width: 100%;height: auto;display: block;
}
</style>
实现瀑布流布局的四种方法相关推荐
- 前端面试题:使用css生成田字格的四种方法
使用css生成田字格的四种方法 html结构 css基础样式 第一种 flex布局 第二种 绝对定位 第三种 css瀑布流 第四种 float浮动 html结构 <div class=" ...
- java 中lock,java中lock获取锁的四种方法
在java接口中会存放着许多方法,方便线程使用时的直接调用.对于lock接口大家都不陌生,我们已经初步对概念进行了理解.那么在获取锁的方法上想必还不是很清楚.下面我们就lock获取锁的四种方法分别进行 ...
- 简单介绍C语言使用四种方法初始化结构体
这篇文章说明了什么是结构体,介绍了结构体的概念和使用优点,在C语言中如何使用和初始化结构体方法,通过详细的代码展开进行说明,希望该篇文章对你有所帮助 什么是结构体 在实际问题中,一组数据往往有很多种不 ...
- svg鼠标响应事件的四种方法(其中两种可支持火狐)
svg鼠标响应事件的四种方法 鼠标响应事件的四种方法,以click事件为例. Mouse Events - SMIL <?xml version="1.0" encoding ...
- oracle调整字段精度的四种方法
oracle调整字段精度的四种方法: 01_执行用户_ddl/dml_表名_注释(建表/授权/同义词) 调整方式一:(精度只能调大不能调小) alter table table_name_a MODI ...
- (转).NET导出Excel的四种方法及评测
.NET导出Excel的四种方法及评测 导出Excel是.NET的常见需求,开源社区.市场上,都提供了不少各式各样的Excel操作相关包.本文,我将使用NPOI.EPPlus.OpenXML.Aspo ...
- 详解Java解析XML的四种方法
http://developer.51cto.com 2009-03-31 13:12 cnlw1985 javaeye 我要评论(8) XML现在已经成为一种通用的数据交换格式,平台的无关性 ...
- linux安装IPython四种方法
IPython是Python的交互式Shell,提供了代码自动补完,自动缩进,高亮显示,执行Shell命令等非常有用的特性.特别是它的代码补完功能,例如:在输入zlib.之后按下Tab键,IPytho ...
- 查看mysql版本的四种方法
2019独角兽企业重金招聘Python工程师标准>>> 查看mysql版本的四种方法 1:在终端下:mysql -V. 以下是代码片段: [shengting@login ~]$ m ...
最新文章
- 关于c语言的字符常量
- linux unix域socket_Socket通信原理
- 626B. Cards
- Python基础语法学习整理
- php运行环境出现Undefined index 或variable时解决方法
- [转载] application/json 四种常见的 POST 提交数据方式
- 我和linux的第十三天
- 为什么Java中的float型最大值大于long型?
- 渗透测试工具篇之Metasploit(MSF)扫描模块的简单使用
- android项目图片分辨率转换工具
- 【环境】NVIDIA驱动安装+cuda11.0(ubuntu16.04)
- 信息系统安全等级保护流程
- 去除IE浏览器弹出窗口
- 极验验证码破解之selenium
- 显式类型转换和隐式类型转换区别?
- mysql error code 100_Mysql 导入报错 error code:1166
- Java版简易画图板的实现
- 触发器+日志+备份与恢复
- 设计一个Shape接口和它的两个实现类Square和Circle
- 精选收集50个计算机热门视频教程免费下载[原创]