چیدمان Masonry

از نسخه 1.11.1 می‌توانید به‌راحتی چیدمان masonry را روی هر المان layout در Bricks اعمال کنید.

کنترل‌های Masonry Layout جدید زیر Style > Layout > Masonry برای همه المان‌های layout (Section، Container، Block، Div) در دسترس است.

Bricks از کتابخانه IsotopeJS برای ساخت masonry استفاده می‌کند — همان کتابخانه‌ای که برای المان‌های Image Gallery و Posts هم به کار می‌رود — برای عملکرد بهینه.

نحوه کار

وقتی Masonry layout فعال است، همه فرزندان مستقیم به masonry item تبدیل می‌شوند.

تعداد ستون‌ها و فاصله‌گذاری را برای breakpointهای مختلف تنظیم کنید تا layout واکنش‌گرا داشته باشید.

نکته

Tip: مطمئن شوید استایل CSS متناقضی روی المان masonry-enabled اعمال نشده باشد؛ ممکن است با چیدمان masonry تداخل کند. بهتر است همه استایل‌های سفارشی المان را پاک کنید تا افکت masonry روان کار کند.

می‌توانید masonry را برای wrap کردن آیتم‌ها در query loop هم استفاده کنید و grid پویا بسازید — مخصوصاً برای layout پست‌ها، محصولات یا محتوای تکراری با grid پلکانی جذاب.

استفاده از انیمیشن Interactions در Bricks

اگر می‌خواهید انیمیشن سفارشی از پنل Interactions اعمال کنید (مثلاً Entry Viewport Trigger و Start Animation برای فرزندان masonry)، انیمیشن‌های پیش‌فرض masonry را با تنظیم Transition: Duration روی 0 غیرفعال کنید.

این از هم‌پوشانی transitionهای پیش‌فرض masonry با انیمیشن سفارشی جلوگیری می‌کند.

عیب‌یابی

تداخل CSS سفارشی

اگر ستون‌های masonry با تنظیمات شما align نمی‌شوند، استایل‌های CSS فرزندان را inspect کنید. استایل‌هایی مثل width، flex-basis یا align-self در flex layout می‌توانند تنظیمات ستون masonry را override کنند. آن‌ها را adjust یا حذف کنید.

به‌روزرسانی محتوای پویا با JavaScript/AJAX سفارشی

اگر کد/افزونه سفارشی nodeهای فرزند masonry را با JavaScript یا AJAX اضافه می‌کند، احتمالاً layout masonry درست به‌روز نمی‌شود. برای رفع، instance masonry را دستی refresh کنید:

bricksUtils.updateIsotopeInstance('BRICKS_ID');

'BRICKS_ID' را با ID مشخص المان masonry جایگزین کنید. این تابع masonry را reinitialize می‌کند تا nodeهای جدید را در بر بگیرد.