实现效果
1、不同屏幕尺寸下根据可视区域宽度判断 应该 放几列,这里用onresize演示
2、鼠标滚动到已加载数据的底部时再次请求数据,重新计算哪一列高度最小,push到最小的那一列
实现思路
1、瀑布流的盒子使用flex布局,每一列column的间距相等
2、获取数据,根据可视区域的宽度判断需要几列
3、假设根据判断需要n列,那么将获取到的数据前n个一次push到每一列,成为第一个元素
4、此时每一列都有了元素,找到高度最小的那一列,这里可能有多列,找到索引最小那列,然后将元素插入
5、监听滚动事件,可以是document,也可以是具体的元素,只要元素是包裹着瀑布流的并且overflow不是hidden;当滚动到底部时,请求数据,将获得的数据插入到已有的瀑布流中
具体代码
1、瀑布流的盒子使用flex布局,每一列column的间距相等
<div class="container">
<div class="column" v-for="(column,index) in columns" :key="index">
<div
class="item"
v-for="(item,i) in column.columnArr"
:key="i"
:style="{ height: item.height + 'px', background: item.background }"
>
{{ item.text }}
</div>
</div>
</div>
.container {
margin: 0 auto;
padding-bottom: 20px;
display: flex;
justify-content: space-around;
background: pink;
transition: all 0.5s ease-in-out;
}
.item {
width: 120px;
color: #000;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s ease-in-out;
}
2、获取数据,根据可视区域的宽度判断需要几列
// 根据可视区域的宽度判断需要几列
let cWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 假设图片宽度为140px
let cLen = Math.floor((cWidth/140)-1)
3、假设根据判断需要n列,那么将获取到的数据前n个一次push到每一列,成为第一个元素
// 初始化每一列的第一个元素,this.contentArr为获取到的数据
for (let i = 0; i < cLen; i++) {
this.contentArr[i].top = 0 //预设距离顶部值为0
this.columns.push({columnArr:[this.contentArr[i]]})
}
4、此时每一列都有了元素,找到高度最小的那一列,这里可能有多列,找到索引最小那列,然后将元素插入
// 判断应该放到哪一列
for (var index = cLen; index < contentLen; index++) {
this.arrIndex = []
let arr = []
let minHeight = 0
let pushIndex = 0
for (let i = 0; i < this.columns.length; i++) {
arr.push({
height:this.columns[i].columnArr[this.columns[i].columnArr.length-1].height,
top:this.columns[i].columnArr[this.columns[i].columnArr.length-1].top
})
}
minHeight = this.getMinHeight(arr) //找到高度最小的一列,可能有多个
this.getMinIndex(minHeight) //高度最小的一列所在位置的索引,用pushIndex存储
if(this.arrIndex.length>0){
pushIndex = Math.min.apply(null,this.arrIndex) //出现高度一样的,去索引最小的
}
this.contentArr[index].top = minHeight +20
this.columns[pushIndex].columnArr.push(this.contentArr[index])
}
5、当滚动到底部时,请求数据,将获得的数据插入到已有的瀑布流中
document.onscroll = (e) =>{
let top = e.target.documentElement.scrollTop || e.target.body.scrollTop
let height = e.target.documentElement.scrollHeight || e.target.body.scrollHeight
if((top+clientH)==height){
this.loading = true
this.pushElement().then(() =>{
// 从接口最新获取的元素push到目前高度最小的一列
for (var index = 0; index < this.contentArr2.length; index++) {
this.arrIndex = []
let arr = [] //找到高度最小的一列,可能有多个
let minHeight = 0 //高度最小的一列的高度
let pushIndex = 0 //高度最小的一列所在位置的索引
for (let i = 0; i < this.columns.length; i++) {
arr.push({
height:this.columns[i].columnArr[this.columns[i].columnArr.length-1].height,
top:this.columns[i].columnArr[this.columns[i].columnArr.length-1].top
})
}
minHeight = this.getMinHeight(arr)
this.getMinIndex(minHeight)
if(this.arrIndex.length>0){
pushIndex = Math.min.apply(null,this.arrIndex) //出现高度一样的,去索引最小的
}
this.contentArr[index].top = minHeight +20
this.columns[pushIndex].columnArr.push(this.contentArr[index])
this.loading = false
}
})
}
}
完整代码
<template>
<div style="position:relative;">
<div class="container">
<div class="column" v-for="(column,index) in columns" :key="index">
<div
class="item"
v-for="(item,i) in column.columnArr"
:key="i"
:style="{ height: item.height + 'px', background: item.background }"
>
{{ item.text }}
</div>
</div>
</div>
<div class="loading" v-if="loading" v-loading="loading" element-loading-text="加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"></div>
</div>
</template>
<script>
export default {
data() {
return {
contentArr: [
{ value: 0, height: "150", background: "#409eff", text: "1", top: "" },
{ value: 1, height: "250", background: "#67c23a", text: "2", top: "" },
{ value: 2, height: "250", background: "#e6a23c", text: "3", top: "" },
{ value: 3, height: "250", background: "#f56c6c", text: "4", top: "" },
{ value: 4, height: "180", background: "#909399", text: "5", top: "" },
{ value: 5, height: "250", background: "#409eff", text: "6", top: "" },
{ value: 6, height: "180", background: "#67c23a", text: "7", top: "" },
{ value: 7, height: "250", background: "#e6a23c", text: "8", top: "" },
{ value: 8, height: "180", background: "#f56c6c", text: "9", top: "" },
{ value: 9, height: "150", background: "#909399", text: "10", top: "" },
{ value: 10, height: "150", background: "#409eff", text: "11", top: "" },
{ value: 11, height: "250", background: "#67c23a", text: "12", top: "" },
{ value: 12, height: "250", background: "#e6a23c", text: "13", top: "" },
{ value: 13, height: "250", background: "#f56c6c", text: "14", top: "" },
{ value: 14, height: "180", background: "#909399", text: "15", top: "" },
{ value: 15, height: "250", background: "#409eff", text: "16", top: "" },
{ value: 16, height: "180", background: "#67c23a", text: "17", top: "" },
{ value: 17, height: "250", background: "#e6a23c", text: "18", top: "" },
{ value: 18, height: "180", background: "#f56c6c", text: "19", top: "" },
{ value: 19, height: "150", background: "#909399", text: "20", top: "" },
{ value: 20, height: "150", background: "#409eff", text: "21", top: "" },
{ value: 21, height: "250", background: "#67c23a", text: "22", top: "" },
{ value: 22, height: "250", background: "#e6a23c", text: "23", top: "" },
{ value: 23, height: "250", background: "#f56c6c", text: "24", top: "" },
{ value: 24, height: "180", background: "#909399", text: "25", top: "" },
{ value: 25, height: "250", background: "#409eff", text: "26", top: "" },
{ value: 26, height: "180", background: "#67c23a", text: "27", top: "" },
{ value: 27, height: "250", background: "#e6a23c", text: "28", top: "" },
{ value: 28, height: "180", background: "#f56c6c", text: "29", top: "" },
{ value: 29, height: "150", background: "#909399", text: "30", top: "" },
],
columns: [],
arrIndex:[],
loading:false,
contentArr2:[]
};
},
methods: {
pushElement(){
return new Promise((resolve,reject) =>{
setTimeout(() =>{
for (let i = 0; i < 20; i++) {
this.contentArr2[i] = { value: i+this.contentArr.length, height: 50*Math.random()+50, background: "#409eff", text: i+this.contentArr.length, top: "" }
}
resolve()
},500)
})
},
getMinHeight(arr){
let a = []
for (let i = 0; i < arr.length; i++) {
a.push(parseInt(arr[i].height)+parseInt(arr[i].top))
}
return Math.min.apply(null,a)
},
getMinIndex(val){
for (let i = 0; i < this.columns.length; i++) {
let height = this.columns[i].columnArr[this.columns[i].columnArr.length-1].height
let top = this.columns[i].columnArr[this.columns[i].columnArr.length-1].top
if(parseInt(height)+parseInt(top)==val){
this.arrIndex.push(i)
}
}
},
init() {
this.columns = []
let contentLen = this.contentArr.length
// 根据可视区域的宽度判断需要几列
let cWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 假设图片宽度为100px
let cLen = Math.floor((cWidth/140)-1)
console.log(cLen);
// 初始化每一列的第一行元素
for (let i = 0; i < cLen; i++) {
this.contentArr[i].top = 0 //预设距离顶部值为0
this.columns.push({columnArr:[this.contentArr[i]]})
}
// 对剩余元素的判断,应该放到哪一列
for (var index = cLen; index < contentLen; index++) {
this.arrIndex = []
let arr = [] //找到高度最小的一列,可能有多个
let minHeight = 0 //高度最小的一列的高度
let pushIndex = 0 //高度最小的一列所在位置的索引
for (let i = 0; i < this.columns.length; i++) {
arr.push({
height:this.columns[i].columnArr[this.columns[i].columnArr.length-1].height,
top:this.columns[i].columnArr[this.columns[i].columnArr.length-1].top
})
}
minHeight = this.getMinHeight(arr)
this.getMinIndex(minHeight)
if(this.arrIndex.length>0){
pushIndex = Math.min.apply(null,this.arrIndex) //出现高度一样的,去索引最小的
}
this.contentArr[index].top = minHeight +20
this.columns[pushIndex].columnArr.push(this.contentArr[index])
}
},
},
mounted() {
this.init()
window.onresize = () =>{
console.time('aa')
this.init()
console.timeEnd('aa')
}
let clientH = document.documentElement.clientHeight || document.body.clientHeight
document.onscroll = (e) =>{
let top = e.target.documentElement.scrollTop || e.target.body.scrollTop
let height = e.target.documentElement.scrollHeight || e.target.body.scrollHeight
if((top+clientH)==height){
this.loading = true
this.pushElement().then(() =>{
// 从接口最新获取的元素push到目前高度最小的一列
for (var index = 0; index < this.contentArr2.length; index++) {
this.arrIndex = []
let arr = [] //找到高度最小的一列,可能有多个
let minHeight = 0 //高度最小的一列的高度
let pushIndex = 0 //高度最小的一列所在位置的索引
for (let i = 0; i < this.columns.length; i++) {
arr.push({
height:this.columns[i].columnArr[this.columns[i].columnArr.length-1].height,
top:this.columns[i].columnArr[this.columns[i].columnArr.length-1].top
})
}
minHeight = this.getMinHeight(arr)
this.getMinIndex(minHeight)
if(this.arrIndex.length>0){
pushIndex = Math.min.apply(null,this.arrIndex) //出现高度一样的,去索引最小的
}
this.contentArr[index].top = minHeight +20
this.columns[pushIndex].columnArr.push(this.contentArr[index])
this.loading = false
}
})
}
}
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div,
p {
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
padding-bottom: 20px;
display: flex;
justify-content: space-around;
background: pink;
transition: all 0.5s ease-in-out;
}
.item {
width: 120px;
color: #000;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s ease-in-out;
}
.loading{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
</style>
转载:www.cnblogs.com/zsxblog/p/1… 记录学习练手Demo