illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

masonry : کتابخانه Javascript برای grid بندی

2 2511 ۱۷ دی ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام masonry رو خدمت شما معرفی کنم و اونو آموزش بدم.

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر برای سایت خودتون ستون بندی و گرید ( Grid ) بندی انجام بدین و روی اون مدیریت داشته باشین.

میبینید که سه ستون ایجاد شده و تراز هم هستن.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به masonry.pkgd.min.js نیاز داریم. من این فایل در انتهای این مطلب قرار دادم و میتونین از اون استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایل مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

در ابتدا باید یک div با کلاس js-masonry قرار بدین. با این کار به کتابخانه masonry میگین که ، قصد دارین این div رو گرید بندی کنید. حالا باید چیزایی که میخواین رو درون این div قرار بدین. بعنوان مثال من 8 تا div با کلاس item در درون اون قرار میدم و در درون اون div ها ، عکس و عنوان و متن و .... قرار میدم. بصورت زیر :

میبینید که هر div با بقیه متفاوته. حالا یک مقدار استایل به اونا نسبت میدیم. بصورت زیر :

فرض کنید که اصلا از اون کتابخونه استفاده نکنیم. با این کار همه div ها بصورت زیر قرار میگیرن و یک ستون رو تشکیل میدن :

masonry1

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

masonry2

این ظاهری که میبینین ، استایلهای پیش فرض هستن که شما میتونین اونا رو تغییر بدین. برای اینکار باید برای div که کلاس js-masonry دادیم ، از خصوصیت data-masonry-options استفاده کنیم. ویژگی های موجود :

  • itemSelector : با استفاده از این خصوصیت میتونین به این ابزار بگین که ، کدوم عناصر رو میخواین تغییر بدین. در اینجا باید عناصری که کلاس item دارن رو به اون بدیم. بصورت زیر :
  • isOriginLeft : با استفاده از این خاصیت میتونین مشخص کنین که گرید بندی ، از راست به چپ باشه یا از چپ به راست. اگر true قرار بدین ، از چپ به راست خواهد بود.
  • isOriginTop : با استفاده از این خاصیت میتونین مشخص کنین که گرید بندی ، از بالا به پایین باشه یا از پایین به بالا. اگر true قرار بدین ، از بالا به پایین خواهد بود.
  • gutter : با استفاده از این ویژگی میتونین برای هر ستون حاشیه قرار بدین و فاصله رو بیشتر کنید.

اگر بخواین میتونین از همه این ویژگی ها یکجا استفاده کنید. بصورت زیر :

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    جودکی(۶ مهر ۱۳۹۴)

    سلام. واقعا عالی بود.
    من عین مطالبی که گفتین رو انجام دادم فقط میخواستم فاصله ستونها خبلی چسبیده باشه، عدد مربوط به gutter رو صفر کردم ولی باز هم فاصله بین ستونها زیاده. لطفا راهنمایی کنین.

    • ‏‏
      محمد اسفندیاری(۶ مهر ۱۳۹۴)

      در سایت ابزار که برین ویژگی های زیادی وجود داره که میتونین ازشون استفاده کنید.
      فکر کنم margin ها رو کم کنید درست بشه
      موفق باشید

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram