做一个小项目，需要瀑布流，就选他了，先看看效果
使用瀑布流布局组件：vue-waterfall-easy
下载引入：
方式一：直接从git上复制组件的完整代码，引入vue组件文件即可
import vueWaterfallEasy from '你的路径/组件名.vue'
方式二：通过npm全局安装：cnpm install vue-waterfall-easy --save-dev
import vueWaterfallEasy from 'vue-waterfall-easy'
报错注意：
Cannot find module 'pug' 原因是：没有安装pug模块，安装：cnpm install --save pug 或去除：lang='pug'
sass-loader没安装： 解决：安装sass或修改sass为less
注册:
要在当前组件中注册该组件：export default { components:{vueWaterfallEasy}}
组件的使用：
<template>
<div id="all_user">
<div class="search_box">
<input type="text" placeholder="请输入编号或名称"><button><i class="tt tt-quanburen"></i>搜索</button>
</div>
<vueWaterfallEasy :imgsArr="imgsArr" @scrollLoadImg="fetchImgsData">
<template slot-scope="props">
<div class="player_info">
<div class="title"><i class="tt tt-quanburen"></i>{{props.value.info}}</div>
<div class="ticket">
<mt-button @click="upLoadTicket(props.value.id)" size="small"><i class="tt tt-quanburen"></i>投票</mt-button>
</div>
<p class="num">{{props.index+1}}票</p>
</div>
</template>
</vueWaterfallEasy>
</div>
</template>
<script>
import vueWaterfallEasy from './Waterfall/vue-waterfall-easy.vue'
export default {
name: 'app',
data() {
return {
imgsArr: [],
fetchImgsArr: []
}
},
components: {
vueWaterfallEasy
},
methods: {
// 假数据
initImgsArr(n, m) { //num 图片数量
var arr = []
for (var i = n; i < m; i++) {
arr.push({ id:i,src: `./src/assets/images_test/${i + 1}.jpg`, link: 'https://www.baidu.com', info: '一些图片描述文字' })
}
return arr
},
fetchImgsData() {
this.imgsArr = this.imgsArr.concat(this.fetchImgsArr)
},
upLoadTicket(index){ //投票按钮
console.log(index);
}
},
created() {
this.imgsArr = this.initImgsArr(0, 5)
this.fetchImgsArr = this.initImgsArr(5, 10) // 模拟每次请求的新的图片的数据数据
},
}
</script>
vue-waterfall-easy.vue组件
<!-- —————————————↓SCSS———————分界线————————————————————————— -->
<style lang="less">
.vue-waterfall-easy {
position: relative;
width: 100%; // 移动端生效
.img-box {
display: inline-block;
width: 50%; // 移动端生效
box-sizing: border-box;
float: left; // 首行排版
transition: left 1s, top 1s;
.img-inner-box {
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
.img-wraper {
width: 100%;
background: yellow;
}
img {
width: 100%;
vertical-align: bottom;
}
.img-info {
background: #fff;
// padding: .6em;
}
}
}
.loading {
text-align: center;
width: 100%;
position: fixed;
bottom: 10px;
left: 50%;
margin-left: -15px;
width: 30px;
height: 30px;
}
.loading.first-loading {
// 首次预加载白屏，让加载动画处于中间
top: 50%;
margin-top: -15px;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #67CF22;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
animation-delay: -1.0s;
}
@keyframes bounce {
0%,
100% {
transform: scale(0.0);
}
50% {
transform: scale(1.0);
}
}
}
</style>
<!-- —————————————↓HTML————————分界线———————————————————————— -->
<template lang="pug">
.vue-waterfall-easy(
:style="isMobile? '':{width:colWidth*columnCount+'px',left:'50%',marginLeft: -1*colWidth*columnCount/2 +'px'}"
)
div.img-box(
v-for="(v,i) in imgsArrC",
:style="{padding:gap/2+'px',width: isMobile ? '' : colWidth+'px'}"
)
.img-inner-box
//- div.img-wraper(:style="{width:imgWidthC+'px',height:v.height?v.height+'px':''}")
a.img-wraper(
:style="{width:'100%',height:v.height?'auto':''}"
:href="v.link"
)
img(:src="v.src")
div.img-info
slot(:index="i",:value="v")
.loading(v-if="isPreloadingC",:class="{'first-loading':isFirstTIme}")
div.double-bounce1
div.double-bounce2
</template>
<!-- ——————————————↓JS—————————分界线———————————————————————— -->
<script>
//import XXX from './components/XXX'
export default {
name: 'vue-waterfall-easy',
//组件参数
props: {
gap: { //图片间隔
type: Number,
default: 10
},
maxCols: { //最大的列数
type: Number,
default: 5
},
imgsArr: { //请求返回的图片数据
type: Array,
required: true
},
imgWidth: { //制定图片的同一宽度
type: Number,
default: 240
},
timeOut: { // 预加载事件小于500毫秒就不显示加载动画，增加用户体验
type: Number,
default: 500
}
},
data() {
return {
msg: 'this is from vue-waterfall-easy.vue',
columnCount: NaN, // 列数，根据窗口大小初始化
isMobile: navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i), // 初始化移动端
beginIndex: NaN, // 第二列首张图片的index，从这一张开始重新计算图片位置
colsHeightArr: [], // 每一列的图片总和高度为元素组成的数组
imgBoxEls: null, // 所有的.img-box元素
isPreloading: true, // 预加载状态中（1.以等待图片替换 2.图片全部预加载完显示）
isPreloadingC: true,
imgsArrC: [], // 预加载完之后再才开始
loadedCount: 0, // 已经加载图片数量
isFirstTIme: true, // 首次加载
}
},
computed: {
colWidth() { // 每一列的宽度
return this.imgWidth + this.gap
},
imgWidthC() { // 对于移动端重新计算图片宽度
return this.isMobile ? window.innerWidth / 2 - this.gap*2 : this.imgWidth
}
},
methods: {
waterfall() { // 执行瀑布布局
for (var i = this.beginIndex; i < this.imgsArr.length; i++) {
var minHeight = Math.min.apply(null, this.colsHeightArr) // 最低高低
var minIndex = this.colsHeightArr.indexOf(minHeight) // 最低高度的索引
var width = this.imgBoxEls[0].offsetWidth // 图片的宽度获取
// 设置元素定位的位置
this.imgBoxEls[i].style.position = 'absolute'
this.imgBoxEls[i].style.left = minIndex * width + 'px'
this.imgBoxEls[i].style.top = minHeight + 'px'
// 更新colsHeightArr
this.$set(this.colsHeightArr, minIndex, minHeight + this.imgBoxEls[i].offsetHeight)
}
this.beginIndex = this.imgsArr.length
},
loadFn(e, oImg, i) { // 每张图片预加载完成执行函数
this.loadedCount++
if (e.type === 'load') { // 使用图片原始宽度计算图片的高度
this.$set(this.imgsArr[i], 'height', Math.round(this.imgWidthC / (oImg.width / oImg.height)))
}
if (this.loadedCount === this.imgsArr.length) {
this.imgsArrC = this.imgsArr.concat([])
this.isPreloading = false
this.isFirstTIme = false
// 预加载完毕
this.$nextTick(() => {
this.initImgBoxEls()
this.$emit('preloaded')
})
}
},
preload() {
this.imgsArr.forEach((v, i) => {
if (i < this.loadedCount) return
var oImg = new Image()
oImg.addEventListener('load', (e) => {
this.loadFn(e, oImg, i)
})
oImg.src = v.src
})
},
// -----------------初始化化------------------------
initColsHeightArr() { // 第一行元素的高度组成的数组-初始化
this.colsHeightArr = [] // 列数发生变化重新初始化
for (var i = 0; i < this.columnCount; i++) {
this.imgBoxEls[i].style.position = 'static' // 重置下position
var height = this.imgBoxEls[i].offsetHeight
this.colsHeightArr.push(height)
}
},
initImgBoxEls() { // 初始化所有装图片的元素集合,注意高度获取需要在图片加载完成之后，所以在window.onload 事件中初始化
this.imgBoxEls = document.getElementsByClassName('img-box')
},
initColumnCount() { // 列数初始化
var winWidth = window.innerWidth
var columnCount = parseInt(winWidth / this.colWidth)
columnCount = columnCount === 0 ? 1 : columnCount
this.columnCount = this.isMobile
? 2
: (columnCount > this.maxCols ? this.maxCols : columnCount)
},
},
mounted() {
// ==1== 根据窗口大小初始化列数
this.initColumnCount()
this.beginIndex = this.columnCount // 开始排列的元素索引
// ==2== 根据预加载完成的图片的长宽比，计算图片的高度
this.preload()
this.$on('preloaded', () => {
if (this.colsHeightArr.length === 0) this.initColsHeightArr() // 第一次初始化
this.waterfall()
})
window.addEventListener('resize', () => {
var old = this.columnCount
this.initColumnCount()
if (old === this.columnCount) return // 列数不变直接退出
this.beginIndex = this.columnCount // 开始排列的元素索引
this.initColsHeightArr()
this.waterfall()
})
// console.log(this.$el.parentNode)
// console.log(this.$el.parentNode, this.$el.parentNode.scrollTop + this.$el.parentNode.offsetHeight, this.$el.parentNode.scrollHeight)
this.$el.parentNode.addEventListener('scroll', () => {
if (this.isPreloading) return
const lastImgHeight = this.imgsArr[this.imgsArr.length - 1].height
// console.log(this.$el.parentNode, this.$el.parentNode.scrollTop + this.$el.parentNode.offsetHeight, this.$el.parentNode.scrollHeight)
if (this.$el.parentNode.scrollTop + this.$el.parentNode.offsetHeight > this.$el.parentNode.scrollHeight - lastImgHeight) {
this.$emit('scrollLoadImg')
console.log('加载');
}
})
},
watch: {
imgsArr(newV, oldV) {
if (newV.length === oldV.length) return
this.isPreloading = true // 预加载新的图片资源
this.preload()
// setTimeout(()=>{ // 模拟图片预加载时间为1s
// this.preload()
// },1000)
},
isPreloading(v) {
if (v) {
setTimeout(() => {
if (!this.isPreloading) return // 500毫秒内预加载完图片则不显示加载动画
this.isPreloadingC = true
}, this.timeOut)
} else {
this.isPreloadingC = false
}
}
}
}
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
