გახსენით
დახურვა

ქვისა არ მუშაობს. ჩვენ ვიყენებთ jQuery Masonry სკრიპტს Pinterest-ის სტილში პოსტების შესაქმნელად. რა არის jQuery Mansory

07.12.2023 -
სმარტფონები

ბლოგის განყოფილებაში. ეს WordPress ფოტო თემა იქნება ჩვენი მაგალითი, მაგრამ თქვენ ალბათ გინახავთ jQuery Masonry გამოყენებული სხვა WordPress საიტებზე.

რა არის jQuery Mansory

ქვისა შეიძლება ჩაითვალოს css-ის დანამატად, რომლითაც შეგიძლიათ ელემენტების ჰორიზონტალურად მოწყობა, მონიტორის სიგანის მიხედვით გადაადგილება ვერტიკალურ მდგომარეობაში. შედეგად, ვერტიკალური ხარვეზები სხვადასხვა სიმაღლის ელემენტებს შორის მინიმუმამდეა დაყვანილი. თუ გსურთ იგივე გააკეთოთ css-ის გამოყენებით, დამიჯერეთ, ბევრი თავის ტკივილი გექნებათ.

ამ მაგალითში ხედავთ, თუ როგორ მუშაობს jQuery Masonry გამოყენებამდე და მის შემდეგ:

როგორც ნათლად ხედავთ შედეგს, თუ იყენებთ css float: მარცხნივ, შემდეგ რჩება ცარიელი ადგილები, თქვენ უნდა გამოიყენოთ css პოზიცია, რომლის კონფიგურაცია საკმაოდ პრობლემურია, შესაძლებელია, მაგრამ რატომ, ქვისა ამაში არ დაგვეხმარება.

jQuery Mansory-ის გამოყენება WordPress საიტებზე

ქვისა შეიძლება გამოყენებულ იქნას ორ შემთხვევაში. პირველი არის, როდესაც ყველა თქვენი ბლოკი ინფორმაციის სიგანისაა, ამ შემთხვევაში თქვენ უნდა გამოიყენოთ სკრიპტის ეს ნაწილი:

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));

} ) ;

სადაც სვეტის სიგანე არის ბადის სიგანე (პიქსელებში). ქვისა დაიცავს ამ ორ წესს:

  • ელემენტის მთლიანი სიგანე (გამოითვლება ამ ფორმულის გამოყენებით) = CSS სიგანე + padding-right+ padding-left + border-right-width + border-left-width + margin-right+ margin-left
  • სვეტის სიგანის გამოყენებისას ყველა ელემენტი უნდა იყოს განლაგებული ჰორიზონტალურად, რათა გამოვთვალოთ ColumnWidth სიგანე (მაგალითად, ColumnWidth: 200, ელემენტები დაიწყება 0 ან 200 ან 400 პიქსელიდან და ა.შ.). ეს შეიძლება მთლად გასაგები არ იყოს, მაგრამ ამაში არაფერია რთული, შეხედეთ სურათს.

    • პირველ ელემენტს აქვს მთლიანი სიგანე 190 პიქსელი და ზღვარი-მარჯვნივ: 0. ხოლო მეორე ელემენტს აქვს ზღვარი-მარცხნივ: 0, თეორიულად ეს ორი ელემენტი უნდა ეხებოდეს ერთმანეთს. მაგრამ რადგან ColumnWidth დაყენებულია 200px-ზე, მეორე ელემენტი იწყებს გამოჩენას 200px მანძილზე.

    ეს პროცესი არ მოხდება, თუ სკრიპტში არ გვაქვს ColumnWidth მნიშვნელობა და ყველა ელემენტი იწყება ერთმანეთის მიყოლებით, ამიტომ აუცილებელია მათი გამოყოფა margin-ის გამოყენებით.

    ასე რომ, jQuery Masonry-ისა და WordPress 3-ის საოცრება..

    ახლა მოდით გავაკეთოთ პატარა კოდირება. პირველ რიგში, მოდით ჩავრთოთ საჭირო jQuery და Masonry ბიბლიოთეკები header.php ფაილში. განათავსეთ ეს კოდი header.php-ში (შეგიძლიათ გადმოწეროთ ოფისიდან):

    //დაკავშირება jQuery

    ქსელები და კომუნიკაციები
    ონლაინ სერვისები