Vue2瀑布流（Waterfall）
瀑布流_百度百科
可自定义设置以下属性：
-
图片数组（images），类型：Array<{title?: string, src: string}>，默认 []
-
要划分的列数（columnCount），类型：number，默认 3
-
各列之间的间隙（columnGap），类型：number，单位px，默认 30
-
瀑布流区域的总宽度（width），类型：number | string，默认 '100%'
-
瀑布流区域和图片圆角（borderRadius），类型：number，单位px，默认 8
-
瀑布流区域背景填充色（backgroundColor），类型：string，默认 '#F2F4F8'
效果如下图：在线预览
其中引用组件：Vue3加载中（Spin）
①创建瀑布流组件Waterfall.vue：文章来源：https://www.toymoban.com/news/detail-421103.html
<script setup lang="ts">
import { ref, shallowRef, computed, watch, watchPostEffect } from 'vue'
import Spin from '../spin'
/*
宽度固定，图片等比例缩放；使用JS获取每张图片宽度和高度，结合 `relative` 和 `absolute` 定位
计算每个图片的位置 `top`，`left`，保证每张新的图片都追加在当前高度最小的那列末尾
*/
interface Image {
src: string // 图片地址
title?: string // 图片名称
}
interface Props {
images: Image[] // 图片数组
columnCount?: number // 要划分的列数
columnGap?: number // 各列之间的间隙，单位px
width?: string|number // 瀑布流区域的总宽度
borderRadius?: number // 瀑布流区域和图片圆角，单位px
backgroundColor?: string // 瀑布流区域背景填充色
}
const props = withDefaults(defineProps<Props>(), {
images: () => [],
columnCount: 3,
columnGap: 20,
width: '100%',
borderRadius: 8,
backgroundColor: '#F2F4F8'
})
const imagesProperty = ref<any[]>([])
const preColumnHeight = ref<number[]>(Array(props.columnCount).fill(0)) // 每列的高度
const waterfall = shallowRef() // ref() 的浅层作用形式
const imageWidth = ref()
const totalWidth = computed(() => {
if (typeof props.width === 'number') {
return props.width + 'px'
} else {
return props.width
}
})
const height = computed(() => {
return Math.max(...preColumnHeight.value) + props.columnGap
})
const len = computed(() => {
return props.images.length
})
const loaded = ref(Array(len.value)) // 图片是否加载完成
const rerender = ref(false)
watch(
() => [props.columnCount, props.columnGap, props.width],
() => {
rerender.value = true
preColumnHeight.value = Array(props.columnCount).fill(0)
onPreload()
},
{
deep: true, // 强制转成深层侦听器
flush: 'post' // 在侦听器回调中访问被 Vue 更新之后的 DOM
}
)
watchPostEffect(() => {
if (props.images.length) {
onPreload()
}
})
async function onPreload () { // 计算图片宽高和位置（top，left）
// 计算每列的图片宽度
imageWidth.value = (waterfall.value.offsetWidth - (props.columnCount + 1) * props.columnGap) / props.columnCount
imagesProperty.value.splice(0)
for (let i = 0; i < len.value; i++) {
await loadImage(props.images[i].src, i)
}
}
function loadImage (url: string, n: number) {
return new Promise((resolve) => {
const image = new Image()
image.src = url
image.onload = function () { // 图片加载完成时执行，此时可通过image.width和image.height获取到图片原始宽高
if (!rerender.value) {
loaded.value[n] = false
}
var height = image.height / (image.width / imageWidth.value)
imagesProperty.value[n] = { // 存储图片宽高和位置信息
width: imageWidth.value,
height: height,
...getPosition(n, height)
}
resolve('load')
}
})
}
function getPosition (i: number, height: number) { // 获取图片位置信息（top，left）
if (i < props.columnCount) {
preColumnHeight.value[i] = props.columnGap + height
return {
top: props.columnGap,
left: (imageWidth.value + props.columnGap) * i + props.columnGap
}
} else {
const top = Math.min(...preColumnHeight.value)
let index = 0
for (let n = 0; n < props.columnCount; n++) {
if (preColumnHeight.value[n] === top) {
index = n
break
}
}
preColumnHeight.value[index] = top + props.columnGap + height
return {
top: top + props.columnGap,
left: (imageWidth.value + props.columnGap) * index + props.columnGap
}
}
}
function onLoaded (index: number) {
loaded.value[index] = true
}
</script>
<template>
<div class="m-waterfall" ref="waterfall" :style="`--borderRadius: ${borderRadius}px; background-color: ${backgroundColor}; width: ${totalWidth}; height: ${height}px;`">
<Spin
v-show="loaded[index]!==undefined"
class="m-image"
:style="`width: ${property.width}px; height: ${property.height}px; top: ${property && property.top}px; left: ${property && property.left}px;`"
:spinning="!loaded[index]"
size="small"
indicator="dynamic-circle"
v-for="(property, index) in imagesProperty" :key="index">
<img
class="u-image"
:src="images[index].src"
:alt="images[index].title"
@load="onLoaded(index)" />
</Spin>
</div>
</template>
<style lang="less" scoped>
.m-waterfall {
position: relative;
border-radius: var(--borderRadius);
.m-image {
position: absolute;
.u-image {
width: 100%;
height: 100%;
border-radius: var(--borderRadius);
display: inline-block;
vertical-align: bottom;
}
}
}
</style>
②在要使用的页面引入： 文章来源地址https://www.toymoban.com/news/detail-421103.html
<script setup lang="ts">
import Waterfall from './Waterfall.vue'
import { ref, onBeforeMount } from 'vue'
import { getImageUrl } from '@/utils/util'
const images = ref<any[]>([])
function loadImages () {
for (let i = 1; i <= 10; i++) {
images.value.push({
title: `image-${i}`,
link: '',
src: `https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/${i}.jpg`
})
}
}
onBeforeMount(() => { // 组件已完成响应式状态设置，但未创建DOM节点
loadImages()
})
</script>
<template>
<div>
<h1>Waterfall 瀑布流</h1>
<h2 class="mt30 mb10">基本使用</h2>
<Waterfall :images="images" :width="1100" />
<h2 class="mt30 mb10">自定义展示</h2>
<Waterfall
:images="images"
:width="1100"
:column-count="4"
:column-gap="10"
background-color="#e1faeb"
:border-radius="6" />
</div>
</template>到了这里，关于Vue3瀑布流（Waterfall）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
