Өрлөг ажиллахгүй байна. Бид jQuery Masonry скриптийг ашиглан нийтлэлийг Pinterest-ийн хэв маягаар зохион бүтээдэг. jQuery Mansory гэж юу вэ

Блогын хэсэгт. Энэхүү WordPress зургийн сэдэв нь бидний жишээ байх болно, гэхдээ та jQuery Masonry-г бусад WordPress сайтууд дээр ашигласан байхыг харсан байх.

Өрлөгийг css-ийн нэмэлт гэж үзэж болох бөгөөд үүний тусламжтайгаар та элементүүдийг хэвтээ байдлаар байрлуулж, дэлгэцийн өргөнөөс хамааран босоо байрлал руу шилжиж болно. Үүний үр дүнд өөр өөр өндөртэй элементүүдийн хоорондох босоо цоорхойг багасгадаг. Хэрэв та css ашиглан ижил зүйлийг хийхийг хүсч байвал надад итгээрэй, таны толгой маш их өвдөх болно.

Энэ жишээнээс та jQuery Masonry ашиглахын өмнө болон дараа хэрхэн ажилладагийг харж болно.

Үр дүн нь тодорхой харагдаж байгаа тул хэрэв та css float ашигладаг бол: зүүн, дараа нь хоосон зай үлдэнэ, та CSS байрлалыг ашиглах хэрэгтэй бөгөөд энэ нь тохируулахад нэлээд асуудалтай байдаг, энэ нь боломжтой, ГЭХДЭЭ яагаад, Өрлөг үүнд туслахгүй.

Өрлөгийг хоёр тохиолдолд хэрэглэж болно. Эхнийх нь таны бүх мэдээлэл бүхий блокууд ижил өргөнтэй байх үед та энэ скриптийг ашиглах хэрэгтэй:

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

Хэрэв танд өөр өөр өргөнтэй блок байгаа бол та дараах кодыг ашиглах хэрэгтэй.

jQuery(document).ready(function($)( $("#content_masonry").өрлөг(( баганын Өргөн: 300 )); ));

Энд columnWidth нь сүлжээний өргөн (пикселээр) юм. Өрлөг нь дараах хоёр дүрмийг баримтална.

Эхний элементийн нийт өргөн нь 190px, баруун захын зай: 0. Хоёр дахь элемент нь зүүн талын ирмэг: 0, онолын хувьд эдгээр хоёр элемент хоорондоо шүргэх ёстой. Гэхдээ ColumnWidth-ийг 200px гэж тохируулсан тул хоёр дахь элемент нь 200px зайд гарч эхэлнэ.

Хэрэв бид скриптэд ColumnWidth утга байхгүй бөгөөд бүх элементүүд ар араасаа эхэлдэг бол энэ процесс явагдахгүй тул тэдгээрийг маржин ашиглан тусгаарлах шаардлагатай.

Одоо жаахан кодчилол хийцгээе. Эхлээд header.php файлд шаардлагатай jQuery болон Masonry номын сангуудыг оруулъя. Энэ кодыг header.php-д байрлуул (та үүнийг сайтаас татаж авах боломжтой):

//jQuery-г холбоно уу