diff --git a/src/Masa.Stack.Components/wwwroot/js/components.js b/src/Masa.Stack.Components/wwwroot/js/components.js
index e0c8eaf..a595fa8 100644
--- a/src/Masa.Stack.Components/wwwroot/js/components.js
+++ b/src/Masa.Stack.Components/wwwroot/js/components.js
@@ -141,19 +141,40 @@ window.MasaStackComponents.getTimezoneOffset = function() {
 let masonryInstances = {};
 
 window.MasaStackComponents.initMasonry = (selector, itemSelector, gutter) => {
+    if (!selector || !itemSelector) {
+        console.error('Invalid selector or itemSelector provided.');
+        return;
+    }
+
     const elem = document.querySelector(selector);
-    if (!elem) return;
-
-    masonryInstances[selector] = new Masonry(elem, {
-        itemSelector: itemSelector,
-        columnWidth: itemSelector,
-        percentPosition: true,
-        gutter: gutter
-    });
-
-    setTimeout(() => {
-        masonryInstances[selector].layout();
-    }, 1000);
+    if (!elem) {
+        console.warn(`Element not found for selector: ${selector}`);
+        return;
+    }
+
+    if (typeof Masonry === 'undefined') {
+        console.warn('Masonry is not available. Falling back to normal layout.');
+        return;
+    }
+
+    if (masonryInstances[selector]) {
+        masonryInstances[selector].destroy();
+    }
+
+    try {
+        masonryInstances[selector] = new Masonry(elem, {
+            itemSelector: itemSelector,
+            columnWidth: itemSelector,
+            percentPosition: true,
+            gutter: gutter || 0
+        });
+
+        requestAnimationFrame(() => {
+            masonryInstances[selector].layout();
+        });
+    } catch (error) {
+        console.warn('Falling back to normal layout.');
+    }
 };
 
 function debounce(fn, wait) {