...

Փոխանցված պարամետրերը պետք է համապատասխանի JSON ձեւաչափին: Ես ուզում եմ ձեր ուշադրությունը սեւեռել կոդերի մեջբերումների օգտագործման վրա: Տվյալների որմնադրական ատրիբուտի մեջբերումները միայնակ են, եւ փոխանցվող ընտրանքների համար `կրկնակի: Նրանք: Այսպես է ցուցադրվում օրինակով:

Այս տարբերակը կարող է օգտագործվել, եթե չեք ցանկանում տեղում օգտագործել ավելորդ JavaScript: Օրինակ, ես անմիջապես չէի առաքի JQuery- ը, եթե նա չի օգտագործվել տեղում տեղում:

Ահա այդպիսի գրադարան: Բարդ ոչինչ չկա: Ինչ է հաջորդը:

Տարրերի չափսեր

Դուստրերի տարրերի չափերը կարող են լինել ինչպես ֆիքսված, այնպես էլ ռետինե: Բլոկների բլոկի լայնության ֆիքսված չափով (լայնությամբ եւ բարձրությամբ) եւ դիզայնը տեղադրված է CSS Styling ֆայլում: Բարձրություն, որը ես ուզում եմ ասել, եթե դուք չեք օգտագործում դատարկ բլոկներ, բլոկի բարձրությունը կվերաբերվի զննարկիչով `դրա բովանդակության հիման վրա: Իմ դեպքում ես բարձրությունը չեմ հարցնում, որովհետեւ Նկարներն այսպիսով ունեն ձեր սեփական բարձրությունը:

.Element-imple (լիցք. 2px; լայնություն, 280px) jQuery (փաստաթուղթ). Պատրաստ (գործառույթ ($):

Ռետինե ցանց

Ռետինե ցանցով տարրերի լայնությունը սահմանվում է որպես տոկոս: Ռետինե ցանցը հիմնականում օգտագործվում է հարմարվողական դիզայնի մեջ: Մենք ավելին կխոսենք ստորեւ նշված ընտրանքների մասին:

Հատուկ արդիականացված:

Երբեմն, երբ էջը բեռնված է, կարող է պատահել, որ տարրերը միմյանց համընկնեն: Միեւնույն ժամանակ, նրանք բոլորը մեկնում են մեկ միանգամից եւ սարսափելի տեսք ունեն: Այսպիսով, դուք կարող եք լուծել այս խնդիրը փոքր գրադարանի հետ - Հատուկ արդիականացված:, Լավագույնն ինձ հետ դրսեւորվեց հարմարվողական դիզայնով: Դա այն ժամանակ էր, երբ ես կայքը բացեցի բջջային հեռախոսից պատկերների ցանց, որը ես գնում էի մեկ կույտի:

Միացրեք պատկերների բեռնված CDN- ով.

Օգտագործելով ImagELaaded իրը էջում տեղադրված է միայն դրա ամբողջական բեռնման ավարտից հետո:

// նախաձեռնություն Masonry Var $ grid \u003d $ (". Grid"): Քարտաշային ((// Ընտրանքներ ...); // դասավորության որմնադրությունը յուրաքանչյուր պատկերից հետո բեռնում է $ grid.images բեռնված (): Առաջընթաց (գործառույթ ()));));

Կամ որմնանկարումը նախաստորագրելը տեղի է ունենում միայն բոլոր պատկերների ամբողջական բեռից հետո:

Var $ grid \u003d $ (". Grid"): IROMOLLED (գործառույթ () (// նախաձեռնության որմնադրությունը `բոլոր պատկերները բեռնավորելուց հետո);));));));

Ընտրանքներ (ընտրանքներ)

Հիմա հետաքրքրվենք, թե ինչ կարող ենք անցնել ընտրանքների մեթոդը Որմնադրություն ().

Բոլոր տարբերակները խմբավորված են: Դե, դա արվում է այնպես, որ նրանց նավարկելը ավելի հեշտ էր:

Հիմա տեսնենք, թե ինչ ընտրանքներն ընդգրկված են հատուկ խմբում:

Իրատեսակ

Այս տարբերակը ցույց է տալիս, թե որ տարրերը կկիրառվի որմնանկարման էֆեկտը: Օգտակար է նշել այս տարբերակը, քանի որ մենք կարող ենք կտրել այն իրերը, որոնք դասավորության մաս չեն կազմում: Այս պարամետրն արդեն ծանոթ է մեզ, երբ մենք ապամոնտաժում ենք որմնադրության նախաստորագրումը:

Բարձրություն. «Ավելացված կետ»

սյունը:

Նշում է դասավորության տարրերի լայնությունը: Եթե \u200b\u200bայս պարամետրը բաց թողնի որմնադրությունը, կվերցնի առաջին տարրի արտաքին լայնությունը: Մշակողը միշտ խորհուրդ է տալիս նշել բանախոսների լայնությունը, լինի դա ֆիքսված կամ ռետինե տարրեր:

COLUMNWIDTH: 80:

Տարրերի չափսեր (տարրի չափս)

Եթե \u200b\u200bմենք ուզում ենք մեր դասավորությունը դարձնել ռետինե տարրերով, օրինակ, հարմարվողական դիզայնով, ապա այդ նպատակների համար կա պարամետր, որը դարձնում է մեր ռետինե ցանցը:

տոկոսը

Մենք ապամոնտաժեցինք վերեւում գտնվող ռետինե ցանցի ծածկագիրը, բայց տարբերակները մանրամասներ չառաջանան:

.Element-impe (լիցքավորում. 2PX;) .Պրկիտ չափը (լայնությունը, 25%) jQuery (փաստաթուղթ) Element-Article ", Columnwidth:" .Պրկիտ չափը ", տոկոսադրույքը. True շմարիտ));));

Ինչպես տեսնում ենք, ռետինե ցանցը ակտիվացնելու համար մենք ավելացրեցինք Parameter Parameter- ը բուլյան արժեքով սկզբնական կոդով » Ճիշտ.« Եվ որպես լայնություն նշում էր մի տարրի դասը, որին տոկոսով լայնությունը նշանակվում է CSS- ում:

Սուտ

Տարրերի միջեւ դուք կարող եք տեղադրել տեղորոշիչ հորիզոնական, օգտագործելով տարբերակը: Սուտ, Անցնելով համարը: Համարը կհամապատասխանի պիքսելների նահանջներին:

Gutter: 15.

Էլեմենտների միջեւ ուղղահայաց կետերը տեղադրված են CSS- ում:

Տարրերի կետ (լուսանցքում `15px;)

Անհատները կարող են սահմանվել որպես տոկոս, այսինքն: Նրանք տարբեր կլինեն `կախված զննարկչի պատուհանի չափից:

.Element-Item (լուսանցքում `15px; լիցք; 2px;) .Gutter Լայնություն (լայնություն, 4%): Պատրաստ ($ ($ ( ".Elements-gride"): Որմնադրություն ((Ընտրանքներ Նյութիելորդ.

Մենք ստեղծեցինք դատարկ DIV բլոկ, նախքան իրերի ցանկը:

Այս բլոկի համար CSS- ն ցույց է տվել տոկոսով լայնությունը: Եվ նախնական կոդի ընտրանքում Սուտ Մենք նշեցինք այս դատարկ տարրի դասը: Սցենարը ինքնին կներկայացնի տրոհում, այս բլոկի լայնության հիման վրա:

Կնիք.

Այս տարբերակը կարող է նշանակվել այն իրերը, որոնք կնքված կլինեն որմնադրությանը ցանցում: Մնացած տարրերը կլինեն ներքեւում եւ կներկայացնեն դրոշմակնիքը: Երբեմն դա կարող է օգտակար լինել: Ընտրանքներ Կնիք. Մենք անցնում ենք դրոշմակնիքների դասը:

Նամականիշ: ".stamp"

Անհրաժեշտության դեպքում կարող եք ավելի մանրամասն տեսք ունենալ Codepen- ում, ինչպես նաեւ խմբագրել:

fitwidth.

Այս տարբերակի էությունն այն է, որ երբ մենք այն ակտիվացնում ենք ծնողական տարրերի բլոկով, ավելացվում է պիքսելների ֆիքսված լայնությունը: Ավելին, ծնողական բլոկի լայնությունը հավասար է բոլոր երեխաների տարրերի լայնության չափին: Այսպիսով, նշելով CSS ծնողական բլոկի կանոնը » Լուսանցք. 0 ավտոմատ»Կենտրոնում մենք կարող ենք տեղադրել արշավային տարրերով բլոկ:

Elements-Gride (լուսանցք. 0 ավտո;) isfitwidth: True իշտ է

Ուշադրություն Այս տարբերակը չի գործում այն \u200b\u200bտարրերի հետ, որոնց լայնությունը նշված է տոկոսով: «Columnwidth» տարբերակի արժեքը պետք է նշվի պիքսելներում, օրինակ, «Columnwidth: 120»: Հակառակ դեպքում, տարրերը կարելի է տեղափոխել միմյանց:

originleft.

Լռելյայն, բոլոր ցանցերը հավասարեցված են ձախին: Ընտրանքով originleft. Կարող եք փոխել իրերի հորիզոնական հոսքը եւ հավասարեցումը սահմանել աջից: Բավական է բուլյան արժեքը փոխանցել » Կեղծ »:

Originleft: FALSE

origintop.

Բացի այդ, ինչպես նաեւ հորիզոնական, լռելյայն ցանցի տարրերը հավասարեցված են վերին եզրին: Ընտրանքով origintop. Դուք կարող եք փոխել իրերի հոսքը ուղղահայաց եւ հավասարեցումը ներքեւից վերեւից դնել, մոտավորապես նույնքան Tetris- ում:

Origintop. Կեղծ.

Կարգավորումը (կարգաբերում)

Անցեք պարամետրերի ընտրանքներին:

Բեռնարկղ

Այս տարբերակը չեղյալ է հայտարարում ծնողական բեռնարկղերի ոճերը: Լռելյայն, ծնողը դրված է «դիրքի. Հարաբերական» կանոն: Այս կանոնը կարող է չեղարկվել:

Containerstyle: NULL

Իհարկե, հնարավոր եղավ հաղթահարել CSS ֆայլը, օգտագործելով «! ԿԱՐԵՎՈՐ», բայց ես չեմ սիրում դա անել: Ընդհանրապես, կարծում եմ, որ սա դասավորության վատ կանոն է: Ավելի լավ է մաքրել ոճերը, այնքան ավելի շատ զարգացող մեզ հնարավորություն է տալիս այս հնարավորությունը:

Անցում

Անցման տեւողությունը, երբ իրերը փոխում են իրենց գտնվելու վայրը: Լռելյայն ժամկետը սահմանված է `0.4 վայրկյան: Ժամանակի ձեւաչափը սահմանվում է որպես CSS ժամանակի ձեւաչափ:

Անցում. «0.4s»

Ահա ժամանակի որոշ օրինակներ:

// Արագ անիմացիայի անցում. «0.2S» // դանդաղ անիմացիայի անցում. «0.8S» // Ոչ մի անիմացիա Անցում, 0

չափափոխել

Այս տարբերակով դուք կարող եք չեղարկել ծնողական բլոկի չափի փոփոխությունը: Նրանք: Լռելյայն, եթե հաշվի չառնել ֆիքսված չափը ծնողի համար զննարկչի էկրանի կրճատմամբ, մեր երեխաների ցանցի տարրերը կփոխեն իրենց գտնվելու վայրը, կշարունակվի ազատ տեղ զբաղեցնելով: Այսպիսով, «Չափափոխում» տարբերակով դուք կարող եք չեղարկել անցումները:

Չափափոխել. Կեղծ

Անկեղծ ասած, նույն էֆեկտը կարելի է հասնել, եթե ծնողին հարցնեք պարզապես ֆիքսված չափ: Այստեղ ես չեմ հասկանում ծրագրավորողին `կամ սխալ եմ հասկացել ինչ-որ բան, կամ այս տարբերակը տեղի է ունենում որոշակի դեպքերում: Codepen- ի օրինակով կարող եք տեսնել ավելի շատ մանրամասներ: Փորձեք փոխել զննարկչի էկրանների չափը: Հետո փոխեք «Չափափոխել. Կեղծ» վրա «Չափափոխել. True» Եվ դուք կհասկանաք, թե ինչի մասին ենք մենք խոսում:

նախաձեռնություն

Այս տարբերակն ակտիվացնում է մեր աղյուսի ցանցը սցենարը նախաստորագրելիս: Լռելյայն, այն միացված է - «INTERLAYOUT. TRUE»: Բայց դուք կարող եք չեղարկել:

Նախաձեռնություն. Կեղծ

Դուք կարող եք օգտագործել մեթոդներ եւ իրադարձություններ ցանցի ակտիվացումից առաջ: Օրինակ, դուք կարող եք անել այնպես, որ ձեր ցանցը կակտիվանա `կտտացնելով հատուկ կոճակը: Դե, ապա նման բան:

Այս հոդվածում ես չեմ ապամոնտաժելու իրադարձությունները եւ մեթոդները, քանի որ Հոդված, այն պարզվեց ծավալային: Դուք կարող եք ինքնուրույն ուսումնասիրել դրանք ծրագրավորողի կայքում: Կգտնենք նաեւ իրականացման օրինակներ: Ամեն ինչ միանգամայն հասկանալի է: Միշտ չէ, որ գրությունների հեղինակները գրված են նման ցուցումներ: Որմնադրիչի մշակողների ցուցումների համար ես ծանր կդնեմ - 5 . 🙂

Մաքուր CSS

Մաքուր CSS- ի վրա աղյուսով իրականացնելու տարբերակ կա: Ես այստեղ չեմ տա ամբողջ ծածկագիրը: Կարող եք նայել Codepen- ին, բարդ բան չկա: Այս դեպքում հարմար է այն փաստի համար, որ ձեզ հարկավոր չէ կապել լրացուցիչ JS գրադարաններ եւ հասկանալ plug-in- ի ընտրանքները:

Սկզբունքորեն, այն ամենը, ինչ ես վերը ասացի, բավական է, որ օգտագործեք աղյուսի ազդեցությունը ձեր կայքում:

Եվ այս ամենի վրա: Շնորհակալ եմ բոլորիդ ուշադրության համար: Նշեք հարցերը մեկնաբանություններում, ես միշտ ուրախ կլինեմ օգնել: Տեսնում ենք ձեզ հետեւյալ հոդվածներում: Մինչեւ!

Ես ասացի, թե ինչպես ձեւափոխել բլոգի նոր դիզայնը, միամտորեն հավատալով, որ բոլոր կարեւոր աշխատանքներն արդեն կատարվել են: Բայց, ինչպես պարզվեց, դեռ շատ աշխատանքներ կային: Ավելին, ես ստեղծեցի դրա իմ մասը: Բայց նախ առաջինը: Այս գրառման մեջ ես կանդրադառնամ հետեւյալ հարցերին.

• Ինչպես ներմուծել նոր WordPress չիպսեր գրանցման առարկայով. Գրանցեք ձեւաչափեր.
• Ինչպես շտկել բլոկի դիրքավորման խնդիրները որմնադրության սցենարի մեջ.
• Ինչպես իրականացնել որմնադրությունը ցանկացած կայքի:

Այսպիսով, ինչ վերաբերում է մասոններին եւ JavaScript- ին: Ստացվում է, որ կա շփման ընդհանուր կետ: Հուսով եմ, բոլորը գիտեն, թե ովքեր են այդպիսի մասոններ: Եթե \u200b\u200bոչ, ահա հակիրճ սահմանումը.

Մասոններկամ frank-Masons - «Ազատ աղյուսներ» բառացի թարգմանության, XVIII դարում հայտնված շարժումը փակ կազմակերպության տեսքով: Freemasonry- ն իր ծագումն է ունենում XVI- ի ավարտին `XVI- ի վերջում` XVII դարի սկիզբը, իբր թեփոնի գործառնական սեմինարները: Մասոնների բոլոր գործողությունները շատ խորհրդանշական են, շատ բան է կապված ճարտարապետական \u200b\u200bսիմվոլիզմի հետ, եւ հիմնական կերպարներից մեկը կտրված բուրգ է:

Ինձ շատ հետաքրքրում է մասոնները եւ այն ամենը, ինչ կապված է նրանց հետ: Դա շատ հետաքրքիր է: Ես կցանկանայի խոսել իրական մասոնի հետ (բայց ոչ այն բանի հետ, ով հենց Պոնտեի համար է, իրեն անվանում են անվճար Bricklayer, մասնավորապես, իսկական վարպետ): Բայց դա այդպես չէ: Եվ այն փաստի մեջ, որ Pinbin- ի նախագծման թեմայում օգտագործում է սցենարը, որը բլոկներ է առաջացնում գրառումների հայտարարություններով, որպես աղյուսներ: Այժմ այն \u200b\u200bշատ տարածված ոճ է, նման ազդեցության իրականացման համար օգտագործվում են տարբեր եղանակներ, բայց լավագույններից մեկը, անկասկած, JavaScript- ը Որմնադրություն.

Այս JavaScript- ի պաշտոնական կայքը Masonry.desandro.com- ն է, ցույց է տալիս, թե ինչպես է այն գործում եւ ցույց է տալիս, թե ինչպես կարելի է այն միացնել կայքին: Ավելին, դա կարող է լինել ցանկացած կայք, պարտադիր չէ, որ WordPress- ը, A- ն եւ Dle- ը կամ ընդհանուր առմամբ ստատիկ HTML: Բայց արժե ասել, որ WordPress- ում վերջին վարկածներից (3.8-ից, եթե չեմ սխալվում) որակի սցենարը արդեն ներառված է հիմնական փաթեթում: Բայց ինչպես արդեն նշվեց `ամեն ինչ կարգով:

Ինչպես իրականացնել թեմայի մեջ WordPress աջակցության աջակցության ձեւաչափերը գրառումներ:

Այսպիսով, կատարելագործման գործընթացում ես որոշեցի ներառել գրանցման իմ թեման դրա մեջ գործառույթների գործառույթները, որպեսզի հիմնականը կարողանան հրապարակել կարգավիճակը, պատկերասրահը կամ տեսանյութը: Ես խառնվեցի դիզայնի արխիվներում եւ գտա շատ փոքր թվով նման թեմաներ, որոնք աջակցում են այս գործառույթին:

Բայց եթե ձեր WordPress- ը թարմացնեք, գրառումների ձեւաչափերը կարող են իրականացվել թեմայի մեջ, եւ դա հեշտ է: Այսպիսով, առաջին հերթին բացեք ֆայլը Գործառույթներ .ուժ.Գրանցման ձեր թեման եւ դրանում ավելացրեք հետեւյալ ծածկագիրը.

Add_action («Հետագա ution_setup_theme», «Slug_post_formats»); Ֆունկցիան slug_post_formats () (փոստային ձեւաչափեր, զանգված), «Մի կողմ», «Տեսանյութ», «Աուդիո», «Մեջք», «Կարգավիճակ», «Զրուցարան», «Կարգավիճակ», )

Այս ծածկագիրը կարող է տեղադրվել ֆայլի ցանկացած վայրում: Գործառույթներ .ուժ., գլխավորը ոչ մի գործառույթ չխախտելն է: Եթե \u200b\u200bամեն ինչ ճիշտ է արվում, ապա նոր ռեկորդ ստեղծելիս պետք է ունենաք նոր ձեւաչափի բլոկ, եթե ոչ, ապա վերեւում բացեք «Էկրանի կարգավորումներ» ընտրացանկը եւ նշեք հոդային բլոկը:

Բայց այս հատկությունը չի գործի այնքան ժամանակ, քանի դեռ թեմայի թղթապանակում թղթապանակում չի հայտնվի թղթապանակում, տիպի անուններով Բովանդակություն-ինչ-որ բան: - «Ինչ-որ բան» անունով, սա նշան է, թե որ ձեւաչափի այս ֆայլը կլինի:

Նրանք կարող են լինել.

Ձեւաչափերը անհրաժեշտ չեն ամեն ինչ օգտագործելուց, բայց կարող եք վերեւում նշված կոդով նշել այն, ինչ ձեզ հարկավոր է, եթե ձեզ հարկավոր է միայն վիդեո, մեկ նկար եւ պատկերասրահ, ապա ներդիր Գործառույթներ .ուժ.Նման ծածկագիր.

Add_action («Հետագա ution_setup_theme», «Slug_post_formats»); Գործառույթ slug_post_formats () (փոստային ձեւաչափեր, զանգված («պատկեր», «Տեսանյութ», «Պատկերասրահ»);)

Դե, ձեզ հարկավոր է միայն այն ֆայլերը, որոնք նշված են գծում. content-Image.php, content-video.phpմի քանազոր content-Gallery.php. Մի գումարած content.php. Սովորական գրառումների համար: Որտեղ են գալիս այս ֆայլերը: Դուք կարող եք արտաշնչել դրանք քսանֆուրթեզի թեմայից (կամ ցանկացած այլ օժանդակ ձեւաչափերի, օրինակ, Crates) եւ այնուհետեւ զտեք: Պարզապես ներբեռնեք այս թեման ձեր համակարգչին, վերցրեք ձեր անհրաժեշտ ֆայլերը եւ ձեր դիզայնով լցրեք սերվերը: Դրանից հետո նրանք կհայտնվեն բաժնում վահանակում Տեսքը -\u003e Խմբագիր, Բացի այդ, այս ֆայլերը պետք է բերվեն պահանջվող ձեւաչափի, դուք նաեւ պետք է ստեղծեք ոճեր ֆայլում style.css..

Սա ցնցող աշխատանք է, բայց այն կվճարի հարյուրապատիկ: Ես ցույց կտամ նման ֆայլերի օրինակներ (մոտավորապես ես օգտագործում եմ այն \u200b\u200bայս բլոգում).

Content-status.php ֆայլ:

Content-Vide.Php ֆայլեր եւ Բովանդակություն-պատկերասրահ. PPP- ն ամբողջովին նույնն է:

Content.php ֆայլ:

Մի փոքր փորում, դուք կարող եք պարզել, թե ինչն է ձեր սեփական ձեւանմուշները պատրաստել գրառումների ձեւաչափերի համար: Միեւնույն ժամանակ, չպետք է մոռանալ CSS ոճերի մասին: Բայց այստեղ ես չեմ կարող տալ որեւէ առաջարկություն, քանի որ սա շատ յուրահատուկ հարց է եւ կախված է գրանցման հատուկ թեմայից:

Եթե \u200b\u200bդժվարություններ են առաջանում, կամ անհասկանալի մի բան, կարող եք օգնել մեկնաբանություններում, քան ես:

Դե, գրառումների ձեւաչափերը ներկառուցված են եւ հիանալի աշխատում են: Բայց ոչ մի բան չկար ... Նրանք լավ են աշխատում, բայց որմնադրությամբ սցենարի միջոցով նրանք չէին ցանկանում ընկերներ լինել: Օրինակ, պատկերասրահ տեղադրելիս պատկերասրահի ներքո պատկերասրահի ներքո հսկայական տարածք կար, որը նախորդ գրառումից է, որտեղ Google- ից օգտվել եմ հայտարարությունների միջեւ տարօրինակ բացերի մասին Տառատեսակներ: Ահա այս խնդիրները, մենք կսովորենք որոշել ստորեւ:

Ինչպես շտկել բլոկի տեղադրման խնդիրները որմնադրության սցենարի մեջ

Հիշեցնեմ ձեզ խնդրի էության մասին. Google տառատեսակների տառատեսակը օգտագործելով որմնադրությանը սցենարի ստեղծագործում խնդիրներ հայտնվեցին, հոդվածների հայտարարությունների միջեւ ընդմիջումների տարբեր բարձրության տեսքով: Նույն ազդեցությունը, միայն շատ ավելի նկատելի եւ ռեկորդային ձեւաչափերի օգտագործումը, մասնավորապես, նրբաբլիթների պատկերասրահի սալիկապատ պատկերասրահը տեղադրելու ժամանակ:

Ինչպես ասացի, ես օգտագործում եմ Jetpack փաթեթը իմ բլոգում, որում կա նորաձեւ սալիկների պատկերասրահների հիանալի plugin, բայց նման պատկերասրահ տեղադրելիս հայտնվեց.

Masonry Script- ը մեղավոր է, դա որմնադրությունների սցենարն է. Վեբ տառատեսակներ օգտագործելիս այն աշխատում է ավելի շուտ, քան տառատեսակները բեռնված են եւ, հետեւաբար, ամբողջ էջի բեռի վերջում, բլոկները փոքր-ինչ հարթվում են: Կարող է լինել մեկ այլ տարբերակ, երբ բլոկներն ի սկզբանե դառնում են հարթ, իսկ հետո `միմյանց:

Պատկերասրահը նույնն է. Գեղեցիկ սալիկապատ պատկերասրահի կառուցման ժամանակ, խաղային պատկերասրահը `jetpack- ից, որը հաշվարկում է պատկերների չափը շատ ժամանակ է ծախսում (եւ այն անում է մի քանի փուլով), եւ որովայնը աշխատում է Բլոկների դիրքավորումը օգտագործում է առաջին մուտքային (միջանկյալ) տվյալները, որոնք վերադառնում են սալիկապատ պատկերասրահի սցենարը: Հետեւաբար, այս բացը հայտնվում է:

Դա պայքարելու համար պաշտոնական որմնադրության կայքում (տես վերեւում) Կան բացատրություններ. Բաժիններ Պատկերներ բեռնված եւ վեբ տառատեսակներ: Դուք կարող եք ծանոթանալ նշված հղումներում պաշտոնական մեթոդներին: Բայց պարզեցնել աշխատանքը այս սխալները շտկելու համար, ես կտամ իմ առաջարկությունները:

Քարտաշային սցենարի պարամետրերը կառավարելու համար ես օգտագործում եմ ֆայլը Գործառույթներ Որում ես սահմանում եմ անհրաժեշտ ցուցումները եւ կապում այն \u200b\u200bձեւանմուշում: Նախ, ես նշում եմ անիմացիոն պարամետրերը, այնուհետեւ տեղադրում եմ սխալը շտկող ծածկագիրը: Այս ֆայլի բովանդակությունը ամբողջությամբ կտամ մեկնաբանություններով, դուք կարող եք օգտագործել այն գրեթե փոփոխություն.

/ * Քամիի հիմնական պարամետրերի սահմանում * / jQuery (փաստաթուղթ). Պատրաստ («# փոստային տարածք»): Քարտաշային (/ * Նշեք բլոկի ID- ն, որին մենք օգտագործում ենք որմնադրությունը * / * Անջատման անիմացիան անջատելու համար տեղադրեք FALSE * / AnimationOptions. (Տեւողությունը, 500, * անիմացիոն արագություն MillIseconds- ում * / թեթեւացում)));) / * Պատկերասրահի հետ կապված խնդիրների շտկում * / / * Միացնել որմնադրությունը * / / / * Կատարման հետաձգում, մինչեւ բոլոր պատկերները բեռնված լինեն * / / * Սկսել * / (Գործառույթ). Այստեղ անհրաժեշտ է Նշեք բլոկի ID * / $ բեռնարկղը. Դիմակված (ֆունկցիոներ () ($ բեռնարկղ ..Այլ ());)) (jQuery); / * Վերջ * / * ֆիքսել խնդիրներ վեբ տառատեսակների հետ * / / * Սկիզբ * / գործառույթ Triggermaasonry () (եթե ($ բեռնարկղ) (()) $ ()) $ ()) $ ( $ բեռնարկղ \u003d $ ("# փոստային տարածք); Triggermaasonry ();)); Typekit.load ((Ակտիվ, տրիգերմասրոն, ոչ ակտիվ `տրիգերմասրոն)); / * վերջ * /

Ընտրեք այն, ինչ ձեզ հարկավոր է, եւ մեկնաբանությունները եւ սցենարի ավելորդ մասը կարող են ջնջվել, օրինակ, եթե միայն վեբ տառատեսակների հետ կապված խնդիր ունեք, որպեսզի պատկերները բեռնաթափվեն:

Միացրեք այս ֆայլը ձեւանմուշում: Առարկայի ֆայլում header.php.Նախքան փակման պիտակը Տեղադրեք

Ի դեպ, այս ծածկագիրը կարող է ուղղակիորեն միանալ էջում, ինչպես նաեւ փակման պիտակը Տեղադրեք

Էֆեկտը կլինի մոտավորապես նույնը, չնայած JavaScript- ը ավելի ճիշտ միացված է ֆայլի հետ:

Ի դեպ, եթե ունեք WordPress, ապա միացրեք որմնադրությանը սցենարը ինքնուրույն, իսկ պարամետրերը ֆայլը հնարավոր է ֆայլի միջոցով: Գործառույթներ .ուժ.Ձեր թեմայում պարզապես դրա մեջ կոդ ավելացնելը.

Գործառույթ mason_script (wp_register_script ("որմնադրություն", "/ մուտքային ժ. / Ֆայլ / maasonry.pkgd.min.js"); Wp_ceptue_script («որմնադրություն»);) add_action ("wp_enqueue_scripts", "mason_script");

Իհարկե, բոլորն էլ ճշգրիտ հրահանգներ չեն եւ գործողությունների ուղեցույց, բայց միայն ընդհանուր առաջարկություններ, քանի որ յուրաքանչյուր դեպք յուրահատուկ է եւ համընդհանուր ուղեցույց ստեղծելը գրեթե անհնար է: Եթե \u200b\u200bունեք հարցեր. Հարցրեք մեկնաբանություններում:

Ինչպես իրականացնել որմնադրությունը ցանկացած կայքի

Հիմա պատկերացրեք այն իրավիճակը, որը մեր կայքը չի գտնվում CMS Wordpress Վերջին վարկածը, բայց եկեք ասենք DLE (DATALIFE Engine) Եվ մենք նաեւ ցանկանում ենք, որ բլոկների այդպիսի գեղեցիկ տեղանքը օգտագործելով որմնադրությունը:

Բոլորը բավականին պարզ են: Նախ, դուք ներբեռնեք պաշտոնական կայքի որմնադրությանը masonry.pkgd.min.js. , Լցնել այն ձեր սերվերին եւ միացրեք այն ձեւանմուշում: Թեմայի ֆայլի համար DLE- ի համար main.tpl փակման պիտակի Տեղադրեք

Այժմ մենք սահմանում ենք բլոկի կառուցվածքը, որի շրջանակներում կաշխատի որմնադրությունը: Օրինակ, այսպես.

CSS- ում դուք պետք է նշեք նման մի բան.

Mason-Box (Լայնություն, 25%;) .Մասոն-տուփ լայնություն (լայնություն, 50%;)

Այժմ էջը պետք է նախաձեռնի սցենարի գործառույթը.

Այժմ ես ցույց կտամ իսկապես վազքի օրինակով.

1. Միացրեք ֆայլը masonry.pkgd.min.js. Ինչպես ցույց է տրված վերեւում:

2. HTML- ի միջոցով էջում նախաստորագրեք սցենարը.

3. CSS- ում գրանցված հետեւյալը.

Halfnews-Content (լիցք. Box-Shadow: 0 0 1PX #BBB; Լայնությունը, 345px; / * Շատ կարեւոր կետ - կա բլոկի լայնություն * / / * Եթե դա ավելին է, կամ չի կարող լինել * / / * ՀԻՄՆԱԴՐԱՄ Ընկերոջ * / Margin-Leaving: 10px; / * Այն տեղադրված է բլոկների միջեւ հորիզոնական հեռավորության վրա * /)

Ահա TechNotron կայքի հիմնական էջում նման պարզ ձեւավորում (որտեղ բովանդակությունը գտնվում է երկու սյունակում):

Դա է Եթե \u200b\u200bես ինչ-որ տեղ սխալ լինեի, դա նպատակային չէր, պարզապես արագ գրառում եւ ես շատ էի ուզում, այնպես որ սխալները չեն բացվում, հասկանում ենք, որ մենք կգտնենք մի թերություն եւ ճիշտ: Ներեցեք նկարագրված մեթոդների քաղաքապետարանի համար:

Մինչ այժմ. Հուսով եմ, որ դա օգտակար էր:

Էպիլոգայի փոխարեն.

Հաջող բիզնեսի գաղտնիքները.
1. Հեյլերը գիտի նրան:
2. Սեմը ինչ-որ կերպ դուրս եկավ

Պիտակներ,
PISANO 08/01/2014