ما از اسکریپت jQuery Masonry برای طراحی پست ها به سبک Pinterest استفاده می کنیم. Masonry - خروجی بلوک های html به صورت آجر کاری راه اندازی پلاگین Masonry

در بخش وبلاگ این تم عکس وردپرس نمونه ما خواهد بود، اما احتمالاً jQuery Masonry را در سایر سایت های وردپرس استفاده کرده اید.

jQuery Mansory چیست؟

سنگ تراشی را می توان افزوده ای به css در نظر گرفت که با آن می توانید عناصر را به صورت افقی مرتب کنید و بسته به عرض مانیتور به حالت عمودی حرکت کنید. در نتیجه، شکاف های عمودی بین عناصر با ارتفاع های مختلف به حداقل می رسد. اگر می خواهید همین کار را با استفاده از css انجام دهید، باور کنید سردرد زیادی خواهید داشت.

در این مثال می توانید نحوه عملکرد jQuery Masonry قبل و بعد از استفاده را مشاهده کنید:

همانطور که نتیجه را به وضوح می بینید، اگر از css float استفاده کنید: سمت چپ، سپس فضاهای خالی باقی می مانند، باید از موقعیت css استفاده کنید، که پیکربندی آن بسیار مشکل است، ممکن است، اما چرا، Masonry در این مورد کمکی نمی کند.

استفاده از jQuery Mansory در سایت های وردپرس

سنگ تراشی در دو حالت قابل استفاده است. اولین مورد زمانی است که تمام بلوک های شما با اطلاعات دارای عرض یکسان هستند، در این صورت باید از این قطعه اسکریپت استفاده کنید:

jQuery(document).ready(function($)($("#content_masonry").masonry(( singleMode: true )); ));

$("#content_masonry"). سنگ تراشی ((singleMode:true));

} ) ;

اگر بلوک هایی با عرض های مختلف دارید، باید از کد زیر استفاده کنید:

jQuery(document).ready(function($)($("#content_masonry").masonry(( columnWidth: 300 )); ));

jQuery (سند). آماده(عملکرد($)(

$("#content_masonry"). بنایی ((عرض ستون: 300));

} ) ;

که در آن columnWidth عرض شبکه (بر حسب پیکسل) است. سنگ تراشی از این دو قانون پیروی می کند:

  • عرض کل عنصر (محاسبه شده با استفاده از این فرمول) = عرض CSS + padding-right+ padding-left + border-right-width + border-left-width + margin-right+ margin-left
  • هنگام استفاده از columnWidth، همه عناصر باید به صورت افقی برای محاسبه عرض ColumnWidth قرار گیرند (به عنوان مثال، برای ColumnWidth: 200، عناصر از 0 یا 200 یا 400 پیکسل و غیره شروع می شوند). این ممکن است کاملاً واضح نباشد، اما هیچ چیز پیچیده ای در مورد آن وجود ندارد، به تصویر نگاه کنید.

    • عرض کلی عنصر اول 190 پیکسل و حاشیه-راست: 0 است. عنصر دوم دارای حاشیه-چپ: 0 است، در تئوری این دو عنصر باید یکدیگر را لمس کنند. اما از آنجایی که ColumnWidth روی 200 پیکسل تنظیم شده است، عنصر دوم در فاصله 200 پیکسل ظاهر می شود.

    اگر مقدار ColumnWidth در اسکریپت نداشته باشیم و همه عناصر یکی پس از دیگری شروع شوند، این فرآیند اتفاق نمی افتد، بنابراین لازم است آنها را با استفاده از margin جدا کنیم.

    بنابراین شگفتی های jQuery Masonry و WordPress 3..

    حالا بیایید کمی کدنویسی کنیم. ابتدا، بیایید کتابخانه های jQuery و Masonry لازم را در فایل header.php قرار دهیم. این کد را در header.php قرار دهید (می توانید آن را در سایت آف دانلود کنید):

    //connect jQuery // ظرفی را که Masonry در داخل آن قرار می‌گیرد در یک var var container = document.querySelector("#masonry-loop"); //ایجاد var خالی msnry var msnry; // پس از بارگیری همه تصاویر، ماسونری را مقداردهی کنید. imagesLoaded(container, function() (msnry = new Masonry(container, ( itemSelector: ".masonry-entry" )); )); >