第一次写滚动加载的vue瀑布流
第一次博客，因为公司项目需求就自己写了一个滚动加载的vue瀑布流，总感觉哪里有问题，请各位大神指点指点
<template>
<div id="app">
<div @scroll="skinwheel($event)">
<div ref="gridBoxClass">
<div v-for="item in images" :key="item.id" ref="gridImg">
<p><img :src="item.imgurl" ref="images"></p>
<h2>图片的简洁</h2>
<p>图片详情</p>
<p>作者</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
images: null,
lock: true,
loadImg: 1
}
},
created() {
this.axios.get('/api/text/json1.txt').then((res) => {
this.images = res.data.news;
})
},
updated() {
let image = new Image()
for (let i = 0; i < this.images.length; i++) {
image.src = this.images[i].imgurl
}
let imageArray = [0, 0, 0]
image.onload = () => {
for (let j = 0; j < this.$refs.gridImg.length; j++) {
let gridHeight = this.$refs.gridImg[j].clientHeight;
let min = Math.min(...imageArray);
let minIndex = imageArray.indexOf(min)
this.$refs.gridImg[j].style.top = imageArray[minIndex] + 'px'
this.$refs.gridImg[j].style.left = minIndex * 270 + 'px'
imageArray[minIndex] += gridHeight
}
}
},
methods: {
skinwheel(event) {
if (!this.lock) return;
let vm = this
let height = event.target.clientHeight;
let scrollTop = event.target.scrollTop
let clientHeight = parseInt(this.$refs.gridImg[this.$refs.gridImg.length - 1].style.top) + parseInt(this.$refs.gridImg[this.$refs.gridImg.length - 1].clientHeight)
var skinscroll = (height + scrollTop) / clientHeight >= 0.7 ? true : false;
if (skinscroll) {
this.lock = false;
this.loadImg++
this.axios.get(`/api/text/json${this.loadImg}.txt?t=${Date.now()}`).then(function (res) {
var data;
if (typeof res.data == 'string') {
data = JSON.parse(res.data)
} else {
data = res.data
}
if (data.news.length != 0) {
vm.images.push(...res.data.news)
vm.lock = true
}
})
}
},
},
watch: {
}
}
</script>
<style>
* {
margin: 0;
paddimg: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
width: 1000px;
margin: 0 auto;
height: 100%;
position: relative;
overflow: hidden;
.gridBox {
position: relative;
width: 105%;
height: 100%;
overflow: auto;
paddimg-right: 2%;
box-sizing: border-box;
.gridBoxClass {
position: relative;
height: 100%;
.grid {
position: absolute;
width: 250px;
margin-right: 20px;
.detail {
padding: 20px;
}
.author {
text-align: right;
}
.img {
width: 250px;
}
}
}
}
}
</style>
因为公司需求不要jQuery，所以都是用ref获取高度
