Vue瀑布流最简单实用的(全网最好用)
吊打
vue-waterfall、vue-waterfall-easy 一切框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<style type="text/css">
#fall-list {
position: relative;
}
#fall-list .fall-line {
float: left;
width: 50%;
}
#fall-list .fall-item {
width: 96%;
margin: 5px auto;
background-color: #fff
}
#fall-list .fall-item img {
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<button @click="loadImagex">加载</button>
<div id="fall-list" class="clearfix">
<div ref="line1" class="fall-line">
<div class="fall-item" v-for="(src, index) in data1" :key="index">
<img :src="src">
</div>
</div>
<div ref="line2" class="fall-line">
<div class="fall-item" v-for="(src, index) in data2" :key="index">
<img :src="src">
</div>
</div>
</div>
</div>
<script src="../../../assets/vue/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
components: {},
props: {},
data: function () {
return {
data1: [],
data2: [],
}
},
computed: {},
watch: {},
mounted: function () {
var self = this;
this.loadImagex()
},
methods: {
//读取图片
loadImagex() {
let size = ['300x660', '300x300', '300x350', '300x200', '300x310', '300x470', '300x500', '300x510', '300x200'];
let color = ['E97452', '4C6EB4', '449F93', 'D25064', 'E59649', '4C6EB4', '449F93', 'D25064', 'E59649'];
let imgList = [];
for (let i = 0; i < size.length; i++) {
let url = `http://dummyimage.com/${size[i]}/${color[i]}`
imgList.push(url);
}
this.doSort(0, imgList);
},
doSort(index, list) {
if(index < list.length) {
if(this.$refs.line1.offsetHeight <= this.$refs.line2.offsetHeight) {
this.data1.push(list[index]);
} else {
this.data2.push(list[index]);
}
let that = this;
this.$nextTick(() => {
setTimeout(() => {
that.doSort(index+1, list);
}, 400);
})
}
},
},
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读