fix

src/components/ReactiveLayout/index.vue

@@ -40,11 +40,12 @@ import { computed, onMounted, ref } from "vue";
 const props = defineProps<{
   elementWidth: number;
   list: any[];
+  ELEMENT_MIN_GAP?: number;
 }>();
 
 const containerRef = ref<HTMLDivElement>();
 const elementRef = ref<HTMLDivElement>();
-const ELEMENT_MIN_GAP = 26;
+const ELEMENT_MIN_GAP = props.ELEMENT_MIN_GAP || 26;
 
 const widthOfContainer = ref(1000);
 const widthOfElement = ref(props.elementWidth);

src/views/Collection/AlbumManagement/components/Album/AlbumList.vue

 <template>
-  <div class="flex flex-wrap">
-    <AlbumItem
+  <div class="">
+    <ReactiveLayout :list="list" :element-width="295" :ELEMENT_MIN_GAP="10">
+      <template #element="n">
+        <AlbumItem
+          class="flex-shrink-0"
+          :name="n.name"
+          :time="n.update_time"
+          :bg-url="n.m_img_url"
+          @rename="renameAlbum(n)"
+          @delete="deleteAlbum(n)"
+          @click="$emit('clickAlbum', { id: n.id, name: n.name })"
+        >
+        </AlbumItem>
+      </template>
+    </ReactiveLayout>
+    <!-- <AlbumItem
       class="flex-shrink-0"
       :name="n.name"
       :time="n.update_time"
@@ -10,7 +24,7 @@
       @delete="deleteAlbum(n)"
       @click="$emit('clickAlbum', { id: n.id, name: n.name })"
     >
-    </AlbumItem>
+    </AlbumItem> -->
     <RenameDialog
       v-model:visible="renameShow"
       :old-name="oldName"
@@ -28,6 +42,7 @@ import { ref } from "vue";
 import RenameDialog from "./RenameDialog.vue";
 import { $ajax } from "@/service";
 import { URLS } from "@/service/URL";
+import ReactiveLayout from "@/components/ReactiveLayout/index.vue";
 
 const props = defineProps<{
   list: any[];