Mūras neveikia. Naudojame jQuery Masonry scenarijų, kad sukurtume įrašus Pinterest stiliumi. Kas yra jQuery Mansory
Tinklaraščio skiltyje. Ši „WordPress“ nuotraukų tema bus mūsų pavyzdys, bet tikriausiai matėte, kad „jQuery Masonry“ naudojama kitose „WordPress“ svetainėse.
Kas yra jQuery MansoryMūras gali būti laikomas css papildymu, su kuriuo galite išdėstyti elementus horizontaliai, perkeliant į vertikalią padėtį, priklausomai nuo monitoriaus pločio. Dėl to iki minimumo sumažėja vertikalūs tarpai tarp skirtingų aukščių elementų. Jei norite tą patį padaryti naudodami css, patikėkite, jums labai skaudės galvą.
Šiame pavyzdyje galite pamatyti, kaip „jQuery Masonry“ veikia prieš ir po naudojimo:
Kaip matote rezultatą aiškiai, jei naudojate css float: left, tada lieka tuščios vietos, reikia naudoti css poziciją, kurią konfigūruoti yra gana problemiška, tai įmanoma, BET kodėl, Masonry šiuo atveju nepadės.
„JQuery Mansory“ naudojimas „WordPress“ svetainėseMūras gali būti naudojamas dviem atvejais. Pirma, kai visi jūsų blokai su informacija yra vienodo pločio, tokiu atveju turite naudoti šį scenarijaus fragmentą:
jQuery(document).ready(function($)( $("#content_masonry").masonry(( singleMode: true )); ));
$("#content_masonry"). mūras ((vieno režimo: tiesa)); } ) ; |
Jei turite skirtingo pločio blokus, turite naudoti šį kodą:
jQuery(document).ready(function($)( $("#content_masonry").masonry(( stulpelio plotis: 300 )); ));
jQuery(dokumentas). paruošta(funkcija($)( $("#content_masonry"). mūras((stulpelio plotis: 300)); } ) ; |
Kur columnWidth yra tinklelio plotis (pikseliais). Mūrijimas laikysis šių dviejų taisyklių:
Pirmojo elemento bendras plotis yra 190 pikselių, o paraštės dešinėje: 0. O antrojo elemento paraštės kairioji vertė: 0, teoriškai šie du elementai turėtų liestis vienas su kitu. Tačiau kadangi stulpelio plotis nustatytas į 200 pikselių, antrasis elementas pradedamas rodyti 200 pikselių atstumu.
Šis procesas neįvyks, jei scenarijuje neturėsime ColumnWidth reikšmės ir visi elementai prasidės vienas po kito, todėl juos būtina atskirti naudojant paraštę.
Taigi „jQuery Masonry“ ir „WordPress 3“ stebuklai...Dabar atlikime šiek tiek kodavimo. Pirmiausia į header.php failą įtraukime reikiamas jQuery ir Masonry bibliotekas. Įdėkite šį kodą į header.php (galite jį atsisiųsti ne svetainėje):
//prijunkite jQuery