vue3实现图片瀑布流展示

最近在研发AI副业项目平台，然后本身设计了一个瀑布流组件，可以随意调解展示的列数、懒加载、每页滚动数量、高度、点击效果等。

一、效果

先看看效果如何，如何随意调解4列、5列、6列、N列展示。

二、实现方法

现建立components/waterfall/index.vue组件

1. <template>
2.   <div class="waterfall-container" ref="containerRef" @scroll="handleScroll">
3.     <div class="waterfall-list">
4.       <div
5.         class="waterfall-item"
6.         v-for="(item, index) in resultList"
7.         :key="index"
8.         :style="{
9.           width: `${item.width}px`,
10.           height: `${item.height}px`,
11.           transform: `translate3d(${item.x}px, ${item.y}px, 0)`,
12.         }"
13.       >
14.         <slot name="item" v-bind="item"></slot>
15.       </div>
16.       <div v-if="isEnd" class="no-more-data">暂无更多数据</div>
17.     </div>
18.   </div>
19. </template>
21. <script setup>
22. import { ref, onMounted, computed, onUnmounted, watch } from "vue";
23. import { throttle, debounce } from "@/utils/waterfall/utils.js";
25. const props = defineProps({
26.   gap: {
27.     type: Number,
28.     default: 10,
29.   },
30.   columns: {
31.     type: Number,
32.     default: 3,
33.   },
34.   bottom: {
35.     type: Number,
36.     default: 0,
37.   },
38.   images: {
39.     type: Array,
40.     default: () => [],
41.   },
42.   fetchMoreImages: {
43.     type: Function,
44.     required: true,
45.   },
46.   isEnd: {
47.     type: Boolean,
48.     default: false,
49.   },
50. });
52. const containerRef = ref(null);
53. const cardWidth = ref(0);
54. const columnHeight = ref(new Array(props.columns).fill(0));
55. const resultList = ref([]);
56. const loading = ref(false);
58. const minColumn = computed(() => {
59.   let minIndex = -1,
60.     minHeight = Infinity;
62.   columnHeight.value.forEach((item, index) => {
63.     if (item < minHeight) {
64.       minHeight = item;
65.       minIndex = index;
66.     }
67.   });
69.   return {
70.     minIndex,
71.     minHeight,
72.   };
73. });
75. const handleScroll = throttle(() => {
76.   const { scrollTop, clientHeight, scrollHeight } = containerRef.value;
77.   const bottom = scrollHeight - clientHeight - scrollTop;
78.   if (bottom <= props.bottom && !props.isEnd) {
79.     !loading.value && props.fetchMoreImages();
80.   }
81. });
83. const getList = (list) => {
84.   return list.map((x, index) => {
85.     const cardHeight = Math.floor((x.height * cardWidth.value) / x.width);
86.     const { minIndex, minHeight } = minColumn.value;
87.     const isInit = index < props.columns && resultList.value.length < props.columns;
88.     if (isInit) {
89.       columnHeight.value[index] = cardHeight + props.gap;
90.     } else {
91.       columnHeight.value[minIndex] += cardHeight + props.gap;
92.     }
94.     return {
95.       width: cardWidth.value,
96.       height: cardHeight,
97.       x: isInit
98.         ? index % props.columns !== 0
99.           ? index * (cardWidth.value + props.gap)
100.           : 0
101.         : minIndex % props.columns !== 0
102.         ? minIndex * (cardWidth.value + props.gap)
103.         : 0,
104.       y: isInit ? 0 : minHeight,
105.       image: x,
106.     };
107.   });
108. };
110. const resizeObserver = new ResizeObserver(() => {
111.   handleResize();
112. });
114. const handleResize = debounce(() => {
115.   const containerWidth = containerRef.value.clientWidth;
116.   cardWidth.value =
117.     (containerWidth - props.gap * (props.columns - 1)) / props.columns;
118.   columnHeight.value = new Array(props.columns).fill(0);
119.   resultList.value = getList(resultList.value);
120. });
122. const init = () => {
123.   if (containerRef.value) {
124.     const containerWidth = containerRef.value.clientWidth;
125.     cardWidth.value =
126.       (containerWidth - props.gap * (props.columns - 1)) / props.columns;
127.     resultList.value = getList(props.images);
128.     resizeObserver.observe(containerRef.value);
129.   }
130. };
132. watch(() => props.images, (newImages) => {
133.   const newList = getList(newImages);
134.   resultList.value = [...resultList.value, ...newList];
135. });
137. onMounted(() => {
138.   init();
139. });
141. onUnmounted(() => {
142.   containerRef.value && resizeObserver.unobserve(containerRef.value);
143. });
144. </script>
146. <style lang="scss">
147. .waterfall {
148.   &-container {
149.     width: 100%;
150.     height: 100%;
151.     overflow-y: scroll;
152.     overflow-x: hidden;
153.   }
155.   &-list {
156.     width: 100%;
157.     position: relative;
158.   }
159.   &-item {
160.     position: absolute;
161.     left: 0;
162.     top: 0;
163.     box-sizing: border-box;
164.     transition: all 0.3s;
165.   }
166.   .no-more-data {
167.     text-align: center;
168.     padding: 20px;
169.     color: #999;
170.     font-size: 14px;
171.   }
172. }
173. </style>

复制代码

此中@/utils/waterfall/utils.js如下

1. // 用于模拟接口请求
2. export const getRemoteData = (data = '获取数据', time = 2000) => {
3.     return new Promise((resolve) => {
4.         setTimeout(() => {
5.             console.log(`模拟获取接口数据`, data)
6.             resolve(data)
7.         }, time)
8.     })
9. }
11. // 获取数组随机项
12. export const getRandomElement = (arr) => {
13.     var randomIndex = Math.floor(Math.random() * arr.length);
14.     return arr[randomIndex];
15. }
17. // 指定范围随机数
18. export const getRandomNumber = (min, max) => {
19.     return Math.floor(Math.random() * (max - min + 1) + min);
20. }
22. // 节流
23. export const throttle = (fn, time) => {
24.     let timer = null
25.     return (...args) => {
26.         if (!timer) {
27.             timer = setTimeout(() => {
28.                 timer = null
29.                 fn.apply(this, args)
30.             }, time)
31.         }
32.     }
33. }
34. // 防抖
35. export const debounce = (fn, time) => {
36.     let timer = null
37.     return (...args) => {
38.         clearTimeout(timer)
39.         timer = setTimeout(() => {
40.             fn.apply(this, args)
41.         }, time)
42.     }
43. }

复制代码

调用组件

1. <template>
2.   <div>
3.     <div class="page-dall">
4.       <el-row>
5.         <el-col :span="6">
6.           <div class="inner">
7.             <div class="sd-box">
8.               <h2>DALL-E 创作中心</h2>
9.               <div>
10.                 <el-form label-position="left">
11.                   <div style="padding-top: 10px">
12.                     <el-form-item :label-style="{ color: 'white' }" label="图片尺寸">
13.                       <template #default>
14.                         <div>
15.                           <el-select v-model="selectedValue" @change="updateSize" style="width:176px">
16.                             <el-option label="1024*1024" value="1024*1024"/>
17.                             <el-option label="1972*1024" value="1972*1024"/>
18.                             <el-option label="1024*1972" value="1024*1972"/>
19.                           </el-select>
20.                         </div>
21.                       </template>
22.                     </el-form-item>
23.                   </div>
25.                   <div style="padding-top: 10px">
26.                     <div class="param-line">
27.                         <el-input
28.                             v-model="dalleParams.prompt"
29.                             :autosize="{ minRows: 4, maxRows: 6 }"
30.                             type="textarea"
31.                             ref="promptRef"
32.                             placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
33.                         />
34.                       </div>
35.                   </div>
36.                 </el-form>
37.               </div>
38.               <div class="submit-btn">
39.                 <el-button color="#ffffff" :loading="loading" :dark="false" round @click="generate">
40.                   立即生成
41.                 </el-button>
42.               </div>
43.             </div>
44.           </div>
45.         </el-col>
46.         <el-col :span="18">
47.           <div class="inner">
48.             <div class="right-box">
49.               <h2>创作记录</h2>
50.               <div>
51.                 <el-form label-position="left">
52.                    <div class="container">
53.                     <WaterFall :columns="columns" :gap="10" :images="images" :fetchMoreImages="fetchMoreImages" :isEnd="isEnd">
54.                       <template #item="{ image }">
55.                         <div class="card-box">
56.                           <el-image :src="image.url" @click="previewImg(image)" alt="waterfall image" fit="cover" style="width: 100%; height: 100%;cursor:pointer;" loading="lazy"></el-image>
57.                           
61.                         
62.                         </div>
63.                       </template>
64.                     </WaterFall>
65.                   </div>
66.                 </el-form>
67.               </div>
68.             </div>
69.           </div>
70.         </el-col>
71.       </el-row>
72.     </div>
73.     <el-image-viewer @close="() => { previewURL = '' }" v-if="previewURL !== ''"  :url-list="[previewURL]"/>
74.   </div>
75. </template>
77. <script lang="ts" setup>
78. import { ElUpload, ElImage, ElDialog, ElRow, ElCol, ElButton, ElIcon, ElTag, ElInput, ElSelect, ElTooltip, ElForm, ElFormItem, ElOption ,ElImageViewer} from "element-plus";
79. import {Delete, InfoFilled, Picture} from "@element-plus/icons-vue";
80. import feedback from "~~/utils/feedback";
81. import { useUserStore } from '@/stores/user';
82. import WaterFall from '@/components/waterfall/index.vue';
83. import * as xmgai from "~~/api/ai";
85. // 获取图片前缀
86. const config = useRuntimeConfig();
87. const filePrefix = config.public.filePrefix;
89. const router = useRouter();
91. const selectedValue = ref('1024*1024');
93. const previewURL = ref("")
95. const loading = ref(false);
98. // 请求参数
99. const dalleParams = reactive({
100.   size:"1024*1024",
101.   prompt: ""
102. });
104. // 创建绘图任务
105. const promptRef = ref(null);
108. const updateSize = () => {
109.   dalleParams.size = selectedValue.value;
110. };
113. const generate = async () => {
114.   loading.value = true;
115.   if (dalleParams.prompt === '') {
116.     promptRef.value.focus();
117.     loading.value = false;
118.     return feedback.msgError("请输入绘画提示词！");
119.    
120.   }
122.   const ctdata = await xmgai.dalle3(dalleParams);
123.   console.info("ctdata",ctdata);
124.   if (ctdata.code === 0) {
125.     feedback.msgError(ctdata.msg);
126.     loading.value = false;
127.     return [];
128.   }
130.   if (ctdata.code === 1) {
131.     // 获取新生成的图片地址
132.     const newImage = {
133.       url: filePrefix +  ctdata.data,
134.       width: 300 + Math.random() * 300,
135.       height: 400 + Math.random() * 300,
136.     };
138.     // 将新图片插入到 images 数组的开头
139.      // 将新图片插入到 images 数组的开头
140.     images.value = [newImage, ...images.value];
142.     // 将 WaterFall 组件的滚动条滚动到顶部
143.     nextTick(() => {
144.       const waterfallContainer = document.querySelector('.waterfall-container');
145.       if (waterfallContainer) {
146.         waterfallContainer.scrollTop = 0;
147.       }
148.     });
150.     feedback.msgSuccess(ctdata.msg);
151.     loading.value = false;
152.   }
154. };
156. const images = ref([]);
157. const pageNo = ref(1);
158. const pageSize = ref(10);
159. const isEnd = ref(false);
161. // 请求参数
162. const paramsCreate = reactive({
163.   aiType: "dalle3",
164.   pageNo: pageNo.value,
165.   pageSize: pageSize.value,
166. });
168. const fetchImages = async () => {
169.   const ctdata = await xmgai.aiList(paramsCreate);
170.   if (ctdata.code === 0) {
171.     feedback.msgError(ctdata.msg);
172.     return [];
173.   }
175.   if (ctdata.code === 1) {
176.     const data = ctdata.data.lists;
177.     if (data.length === 0) {
178.       isEnd.value = true;
179.       return [];
180.     }
181.     paramsCreate.pageNo++;
182.     return data.map(item => ({
183.       ...item, // 保留所有原始字段
184.       url: filePrefix + item.localUrls,
185.       width: 300 + Math.random() * 300,
186.       height: 400 + Math.random() * 300,
187.     }));
188.   }
189. };
191. const fetchMoreImages = async () => {
192.   if (isEnd.value) {
193.     return; // 如果已经没有更多数据了，直接返回
194.   }
195.   const newImages = await fetchImages();
196.   images.value = [...newImages];
197. };
200. // 列数设置
201. const columns = ref(4); // 你可以在这里修改列数
202. //放大预览
203. const previewImg = (item) => {
204.   console.info("item",item.url);
205.   previewURL.value = item.url
206. }
210. onMounted(async () => {
211.   const initialImages = await fetchImages();
212.   images.value = initialImages;
213. });
215. </script>
217. <style scoped>
218. .page-dall {
219.   background-color: #0c1c9181;
220.   border-radius: 10px; /* 所有角的圆角大小相同 */
221.   border: 1px solid #3399FF;
222. }
224. .page-dall .inner {
225.   display: flex;
226. }
228. .page-dall .inner .sd-box {
229.   margin: 10px;
230.   background-color: #222542b4;
231.   width: 100%;
232.   padding: 10px;
233.   border-radius: 10px;
234.   color: #ffffff;
235.   font-size: 14px;
236. }
238. .page-dall .inner .sd-box h2 {
239.   font-weight: bold;
240.   font-size: 20px;
241.   text-align: center;
242.   color: #ffffff;
243. }
245. .page-dall .inner .right-box {
246.   margin: 10px;
247.   background-color: #222542b4;
248.   width: 100%;
249.   padding: 10px;
250.   border-radius: 10px;
251.   color: #ffffff;
252.   font-size: 14px;
253. }
255. .page-dall .inner .right-box h2 {
256.   font-weight: bold;
257.   font-size: 20px;
258.   text-align: center;
259.   color: #ffffff;
260. }
262. .submit-btn {
263.   padding: 10px 15px 0 15px;
264.   text-align: center;
265. }
267. ::v-deep(.el-form-item__label) {
268.   color: white !important;
269. }
271. .container {
272.   height: 600px;
273.   border: 2px solid #000;
274.   margin-top: 10px;
275.   margin-left: auto;
276.   margin-right: auto; /* 添加居中处理 */
277. }
279. .card-box {
280.   position: relative;
281.   width: 100%;
282.   height: 100%;
283.   border-radius: 4px;
284.   overflow: hidden;
285. }
287. .card-box img {
288.   width: 100%;
289.   height: 100%;
290.   object-fit: cover;
291. }
295. .card-box .remove {
296.   display: none;
297.   position: absolute;
298.   right: 10px;
299.   top: 10px;
300. }
302. .card-box:hover .remove {
303.   display: block;
304. }
305. </style>

复制代码

项目源码和题目交流，可以通过文末名片找到我。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。