Add vue-waterfall-plugin-next to dependencies

package.json

@@ -17,7 +17,8 @@
   "dependencies": {
     "pinia": "^2.1.7",
     "vue": "^3.4.29",
-    "vue-router": "^4.3.3"
+    "vue-router": "^4.3.3",
+    "vue-waterfall-plugin-next": "^2.6.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",

src/views/HomeView.vue

@@ -1,51 +1,69 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import imageListData from '@/assets/imageList.json'
+import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
+import 'vue-waterfall-plugin-next/dist/style.css'
 
-const imageList = ref<string[]>([])
+const imageList = ref<{ id: string; src: string; name: string }[]>([])
+
+/**
+ * 获取随机ID
+ * @param {*} length
+ * @returns
+ */
+function randomID(length = 6) {
+  return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36)
+}
 
 onMounted(() => {
-  imageList.value = imageListData
+  imageList.value = imageListData.map((imagePath: string) => ({
+    id: randomID(),
+    src: imagePath,
+    name: imagePath.split('/').pop() || ''
+  }))
 })
-
 const getFileName = (path: string) => {
   return path.replace('./imgs/', '')
 }
 </script>
 
 <template>
-  <div class="image-container">
-    <div v-for="image in imageList" :key="image" class="image-wrapper">
-      <img :src="image" alt="Image" />
-      <p class="image-filename">{{ getFileName(image) }}</p>
-    </div>
-  </div>
+  <h1>ClassIsland Hub</h1>
+  <Waterfall :list="imageList" :column-width="200" :gutter="16">
+    <template #default="{ item }">
+      <div class="image-wrapper">
+        <LazyImg :url="item" alt="Image" />
+        <p class="image-filename">{{ item.name }}</p>
+      </div>
+    </template>
+  </Waterfall>
 </template>
 
 <style scoped>
-.image-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  justify-content: center;
+h1 {
+  text-align: center;
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #333;
 }
 
 .image-wrapper {
-  flex: 1 1 200px;
-  max-width: 200px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   overflow: hidden;
-  text-align: center;
 }
 
-img {
+.image-wrapper img {
   width: 100%;
   height: auto;
   display: block;
 }
 
 .image-filename {
-  margin-top: 5px;
-  font-size: 14px;
+  padding: 8px;
+  text-align: center;
+  font-size: 16px;
   color: #333;
 }
 </style>