دانلود masonry-layout و نشانی CDN ایرانی

اگه تا حالا یه لیست کارت با ارتفاع های مختلف رو با float یا یه گرید ساده چیده باشی، مشکلش رو دیدی: کارت کوتاه کنار کارت بلند می شینه و زیرش یه حفره خالی می مونه. masonry-layout دقیقا برای همین ساخته شده. هر آیتم رو تو ستونی می ذاره که بالاترین جای خالی رو داره. نتیجه یه چیدمان فشرده و تقریبا بدون سوراخ می شه، همون چیزی که تو پینترست می بینی.

کار باهاش ساده است. یه المان والد داری و چند آیتم داخلش. با گزینه هایی مثل itemSelector و columnWidth می گی آیتم ها کدوم ها هستن و ستون ها چقدر عرض دارن. بقیه اش رو خودش حساب می کنه. اگه بعدا آیتم جدید اضافه شد، مثلا با دکمه «نمایش بیشتر»، از appended و prepended استفاده کن تا آیتم های تازه بدون چیدن دوباره همه چیز جا بگیرن. با گزینه percentPosition هم می تونی عرض ستون ها رو درصدی بگیری تا چیدمان ریسپانسیو بمونه.

یه جا هست که خیلی ها گیر می کنن: ارتفاع کارت هایی که عکس دارن تا وقتی عکس لود نشده معلوم نیست. اگه چیدمان رو همون اول اجرا کنی، کارت ها روی هم می افتن. راهش اینه که چیدمان رو بعد از لود عکس ها اجرا کنی، مثلا با کتابخانه imagesLoaded که از همین سازنده است. تو سایت های ایرانی که عکس ها گاهی دیر لود می شن، این مورد جدی تره. فونت های وب فارسی هم می تونن ارتفاع متن رو بعد از لود عوض کنن. پس اگه کارت هات متن زیاد دارن، وقتی فونت آماده شد یه بار متد layout رو صدا بزن.

برای سایت راست به چپ مشکلی نیست. گزینه originLeft رو روی false بذار تا چیدمان از سمت راست شروع بشه. این کتابخونه به درد گالری عکس، پورتفولیو، لیست مقاله های کارتی، وبلاگ و فروشگاه هایی می خوره که تصویرها اندازه یکسان ندارن. اگه همه کارت هات هم ارتفاعن، CSS Grid به تنهایی کافیه و جاوااسکریپت نمی خواد. اگه ترتیب خوندن آیتم ها مهمه، مثل یه لیست مرحله به مرحله، حواست باشه چیدمان ستونی ترتیب دیداری رو کمی به هم می ریزه. گزینه horizontalOrder تا حدی کمک می کنه ولی جای یه گرید معمولی رو نمی گیره.

مجوز MIT یعنی تو پروژه های تجاری هم آزادانه می تونی ازش استفاده کنی. نسخه های رسمی و بدون تغییر masonry-layout رو تو مخزن داخلی ما هم پیدا می کنی، برای وقتی که دسترسی به npm یا CDN های خارجی کنده یا قطعه.

راهنمای استفاده

راه اندازی masonry-layout تو یه صفحه معمولی چند قدم بیشتر نیست.

• فایل کتابخانه رو از همین صفحه دانلود کن و رو هاست خودت آپلود کن. کد آماده درج هم پایین همین صفحه هست.
• فایل رو قبل از بسته شدن تگ body یا با defer تو صفحه بیار.
• یه المان والد بساز و آیتم هات رو داخلش بذار. برای همه آیتم ها یه کلاس مشترک بذار، مثلا کلاس کارت.
• عرض آیتم ها رو با CSS مشخص کن. معمولا درصدی می گیرن تا ستون ها با اندازه صفحه جابه جا بشن.
• کتابخانه رو راه بنداز: یا با ویژگی data-masonry روی المان والد، یا با جاوااسکریپت و ساختن یه نمونه جدید از Masonry با گزینه هایی مثل itemSelector و columnWidth.
• اگه آیتم ها عکس دارن، چیدمان رو بعد از لود عکس ها اجرا کن یا بعدش layout رو صدا بزن.
• برای سایت فارسی و راست به چپ، گزینه originLeft رو روی false بذار.

اگه سایتت وردپرسیه، یادت باشه خود وردپرس هم یه نسخه از این کتابخانه رو همراه هسته داره. قبل از اضافه کردن فایل جدید، چک کن با نسخه ای که قالب یا افزونه ات لود می کنه تداخل نداشته باشه.