Мундариҷа
- 01. Насб кардани масон
- 02. Масъалаҳо бо тасвирҳо
- 03. Идеяҳо барои корбарони пешрафта
- 04. Масъалаҳои истифодаи корхона
- 05. Хатогии Masonry
- 06. Хулоса
- Дониш лозим аст: HTML, CSS ва JavaScript / jQuery асосӣ
- Талаб мекунад: Муҳаррири матн, браузери муосир
- Вақти лоиҳа: 1 соат
- Файли дастгирӣ 1
Ин мақола бори аввал дар шумораи 229 маҷаллаи .net чоп шудааст.
Таркиши Pinterest дидааст, ки тарроҳӣ ва таҷрибаи корбарон ситоиш карда мешавад. Аммо агар шумо дар ду соли охир дар ғор зиндагӣ намекардед, шумо эҳтимолан чунин мафҳумро дар бисёр сайтҳои хурдтар дидаед, ба монанди сайтҳои портфолио ва ҳисобҳои Tumblr. Ин тавассути Masonry, як васлаки тарҳбандии шабакаи динамикӣ барои jQuery имконпазир аст - Pinterest барои ин скрипти фармоишӣ эҷод кард, аммо консепсия бо Masonry шабеҳ аст. Дэвид ДеСандро, созандаи Masonry, онро ҳамчун "флип-канори CSS шино мекунад" тавсиф мекунад. Дар шиноҳои анъанавии CSS объектҳо ба таври уфуқӣ ва амудӣ ҷойгир карда мешаванд. Masonry инро баръакс мекунад ва метавонад фазои мавҷударо дар шабака оптимизатсия кунад.
Масона ҳамаи ашёеро, ки шумо ба он хизмат мерасонед, чен мекунад ва онҳоро ба тариқи беҳтарин бо чизҳои фазоии дастрас аз нав танзим мекунад. Ин ҳалли он махсусан бо мундариҷаи тасвирӣ хуб кор карда, девори амалан бефосилаи расмҳои якҷояшударо осон мекунад. Бе Masonry, чунин тарҳ амалан ғайриимкон аст, аммо плагин онро танҳо дар чанд сатри JavaScript дастрас мекунад.
01. Насб кардани масон
Пеш аз оғози кор ба шумо лозим аст, ки HTML, CSS ва JavaScript-и асосиро созед. Ман нусхаи соддагардонидашудаи онро аз HTML5 Boilerplate дохил кардам. Дар demo.html файл, ман 10 унсури гуногун илова кардам, ки мехоҳам аз ҷониби Masonry гузошта шавам. Ҳар яке аз ин унсурҳо дорои синфи ашё ва танҳо як тасвирро дар бар мегирад. Мо style.css файл сабкҳои асосии ин ашёро эълом мекунад ва онҳоро месозад 300px васеъ, намоиш блок, шино кунед чап ва ҳошияи боло ва рости он доранд 20px.
Биёед бубинем, ки ин пеш аз татбиқи Masonry чӣ гуна аст. Дар файлҳои намоишии худ, шарҳ диҳед script.js дар поёни demo.html файл барои тарҳбандии 'un Masoned'. Шумо фосилаи амудии номувофиқро байни тасвирҳо мушоҳида хоҳед кард: тасвирҳои баландтар дар як саф фарқиятро дар зери дигар унсурҳо эҷод мекунанд ва тарҳбандии шуморо суст мекунанд. Агар шумо андозаи мушаххасе барои ҳама унсурҳо ё мундариҷаи статикӣ, ки шумо онро назорат мекунед, надошта бошед, ҳалли намоиши доираи мундариҷа метавонад ба назар душвор бошад. Masonry дар ин ҷо медурахшад, тарҳбандии мундариҷаи динамикии шуморо фавран оптимизатсия мекунад.
Мо омодаем, ки Masonry -ро татбиқ кунем, бинобар ин, беэътиноӣ кунед script.js. Эҷод кунед $ (ҳуҷҷат). тайёр () кор кунед ва функсияи Masonry -ро дар контейнери мундариҷаи мо даъват кунед.
$ (document) .ready (function () {
$ ('# Мундариҷа'). Девор ({
сутунВасеъ: 320,
itemSelector: '.item'
}}. imagesLoaded (function () {
$ ('# Content'). Masonry ('reload');
});
});
Masonry якчанд имконоти дастрас дорад, аммо инҳо ду роҳи муҳим мебошанд. сутунВасеъ паҳнои минималӣ барои ҳар як сутунро муайян мекунад. Ин ҷойивазкунӣ ва ҳошияро ба назар мегирад, бинобар ин 320 барои тасвири паҳнои 300 пиксел ва 20 пиксел дар канори рост мебошад. itemSelector интихобкунандаи CSS-ро барои ҳама ашёе, ки ба масон таъсир мерасонанд, муайян мекунад. Мо инчунин ба плагини бо Masonry даъватшуда фиристодашуда даъват мекунем тасвирҳо ки ба Masonry мегӯяд, ки дубора барқарор шавад - аммо мо баъдтар ба он мерасем.
Ҳоло биёед ба натиҷа нигарем; фаҳмидани он ки чӣ гуна ба даст оварда мешавад, муҳим аст. Мо акнун мебинем, ки контейнери маснавии мо, # мундариҷа, як синфи дода шудааст .маср ва мавқеи нисбӣ ва баландии бо рамзҳо дар пиксел додашуда дода мешавад. Он чизе, ки мекунад, имкон медиҳад, ки ҳар як элемент ё хишт комилан бо ченкунии дақиқи боло ва чап дар асоси паҳн ва баландии хишт ҷойгир карда шавад.
02. Масъалаҳо бо тасвирҳо
Яке аз масъалаҳои маъмултарин бо Masonry ин унсурҳо, алахусус тасвирҳо, бо ҳам мепайвандад. Масона бо роҳи чен кардани ҳар як хишти мавҷудбуда кор мекунад ва бо назардошти он ченакҳо ба ҳам мувофиқат мекунад. Масъала дар он аст, ки вақте масон элементҳоро чен мекунад, тасвирҳо ба онҳо бор карда намешаванд - бинобар ин Masonry хиштро бе андозаи тасвир чен мекунад. Ин маънои онро дорад, ки ба ҷои доштани баландии (ё паҳнии) пурраи тасвир, он танҳо як сатрро ишғол мекунад.
Роҳҳои гуногуни бартараф кардани он вуҷуд доранд; ҳар кадом тарафҳои мусбат ва манфӣ доранд. Ҳалли маъмултарин он аст, ки интизор шавед то ҳамаи тасвирҳо аз ҷониби браузер бор карда шаванд ва пас Masonry насб кунед. Шумо метавонед инро бо истифода аз он анҷом диҳед $ (window) .load () ба ҷои $ (document). тайёри () ба сар кардани коди худ. Дар ҳоле ки ин натиҷаи дилхоҳро барои Masonry медиҳад, шумо корбарро маҷбур мекунед, ки бо тарҳ пешниҳод карда шавад. Он инчунин як лаҳзаи кӯтоҳи тарҳбандии шуморо бе Masonry пеш аз ба кор даровардан нишон медиҳад. Ниҳоят, ин ҳалли шумо рамзи Masonry-ро аз қисми боқимондаи JavaScript-и шумо дур мекунад, ки мантиқи шуморо ҷудо мекунад ва метавонад бетартибӣ шавад, агар қисматҳои дигари рамзи шумо ба масонсозӣ аввал такя кунанд (масалан, Infroll Scroll).
Як ҳалли қавитар ин навиштани паҳн ва баландии ҳар як унсури тасвир дар замимаи шумост. Бо даровардани ин арзишҳо, Masonry онҳоро дуруст чен мекунад ва то муайян кардани андозаи он интизор шудан лозим нест. Яке аз роҳҳои асосии он дар он аст, ки он талаб мекунад, ки шумо ҳар як андозаи мавҷудбударо дар махзани маълумоти шумо нигоҳ доред, ки ин на ҳамеша имконпазир аст.
Азбаски ин масъала паҳн шудааст, Masonry бо киштиҳо тасвирҳо, плагин, ки ҳа, вақте ба шумо тасвирҳо бор карда мешавад, мегӯяд. тасвирҳо функсияи бозгаштан дорад, ки пас аз пурбор шудани ҳамаи тасвирҳо иҷро мешавад, ки ин ҷои беҳтарин барои оғози масон аст. Ман варианти ҳамаҷониба номидани Masonry -ро баррасӣ мекунам ҳуҷҷат.тайёр ва дубора чен кардани тасвирҳо бор карда мешаванд. Барои ин, ба шумо лозим аст, ки Masonry's -ро истифода баред дубора бор кардан усул. Ман инро дӯст медорам, зеро он ба шумо имкон медиҳад, ки мантиқи худро дар як ҷо нигоҳ доред ва пас аз омода шудани тасвирҳо дубора чен кунед.
03. Идеяҳо барои корбарони пешрафта
Табрик мегӯям, ки шумо нақшаи Masonry-ро насб кардаед - аммо ин танҳо сатҳи кореро, ки Masonry карда метавонад харошида мекунад. Пас аз насб кардани мисоли аввалини Masonry, шумо метавонед онро бо истифодаи усулҳои плагин тағир диҳед. Инҳо функсияҳои иловагии дар Masonry сохташуда мебошанд, ки ба он кӯмак мекунанд, ки чизеро, ки мехоҳед иҷро кунад, ба монанди илова ва нест кардани ашё, аз нав чен кардани андозаи хишт ва бисёр чизҳои дигар. Шумо инчунин имконоти аниматсия кардани мундариҷа, илова кардани хиштҳои нав - ҳатто дастгирии RTL доред. Барои мисоли мо, биёед паҳнои фасеҳи аниматсионӣ созем. Тағир додани паҳнои # мундариҷа ба худкор ва ҳошия аз чап ва ҳошия аз рост худкор дар style.css.
#content {
маржа: 0 худкор;
васеъ: худкор;
}
Мо инчунин бояд танзим кунем isFitWidth ба ростӣ ба насби Masonry мо script.js. isFitWidth ин имконот дар Masonry барои муайян кардани бузургтарин миқдори сутунҳо барои паҳнои ҳозираи браузер мебошад. Ин барои мутамарказ кардани мундариҷа бидуни холигиҳои ногувор хеле муфид аст; бе он Masonry фазои боқимондаро нигоҳ медорад, ки ба андозаи сутун он қадар васеъ нест, яъне контейнери шумо ҳеҷ гоҳ воқеан дар марказ ҷойгир нест.
$ ('# Мундариҷа'). Девор ({
// имконоти дигари маснуот
isFitWidth: ҳақиқӣ
});
Дар браузер Навсозиро пахш кунед: акнун шумо метавонед браузери худро андозаи худро тағир диҳед ва контейнери Masonry паҳнои онро аз нав ҳисоб карда, ба чанд сутун нишон дода метавонад.
Масона инчунин метавонад ин хиштҳоро ҳангоми ба ҷойҳои нави худ ворид шудан, ба туфайли мантиқе, ки а чап ва боло Арзиши CSS дар ҳар як хишт. Роҳҳои гуногуни ба даст овардани он вуҷуд доранд, ки баъзеҳо аз дигарон беҳтаранд. Аз ҳама равшан ин истифодаи jQuery аст, ки шумо метавонед онро бо занг фаъол кунед isAmimated: true ҳангоми даъват кардани масон.
Ин кореро иҷро мекунад, аммо аниматсияи jQuery ба дастёбии DOM такя мекунад ва доштани якчанд хишти калон метавонад иҷрои аниматсияро суст кунад ва таҷрибаро суст ҳис кунад. Усули дигари иҷрои он истифодаи гузариши CSS мебошад, ки чап ва боло Хосиятҳои CSS. Гузариш ба ҳама бартариҳои истифодаи гузаришҳои CSS нисбат ба аниматсияҳои jQuery муҳокимаи комилан ҷудогона аст, аммо истифодаи CSS барои аниматсияҳои шумо хеле қавитар аст ва қариб дар ҳама ҳолатҳо бо Masonry беҳтар кор хоҳанд кард. Барои истифодаи гузаришҳои CSS, ин арзишҳоро ба кор баред .маҳсулот дар style.css, иҷозат чап гузаштан ба арзиши нави он, пас аз он боло як бор чап аниматсия кардааст.
-webkit-гузариш: чап .4s ease-in-out, top .4s ease-in-out .4s;
-moz-гузариш: чап .4s осон-дар-берун, боло .4s осон-дар-берун .4s;
-ms-гузариш: чап .4s осон-дар-берун, боло .4s осон-дар-баромади .4s;
-o-гузариш: чап .4s осонӣ дар дохил, боло .4s осоншавӣ дар .4s;
гузариш: чап .4s осонӣ дар дохили, боло .4s осонии дохилшавӣ .4s;
Гарчанде ки дастгирӣ барои гузаришҳои CSS дар тӯли соли гузашта афзоиш ёфт, онҳо аз ҷониби браузерҳои калонсол дастгирӣ карда намешаванд, ки метавонанд қисми зиёди шунавандагони шуморо ташкил диҳанд. Агар шумо хоҳед, ки гузаришҳои CSS-ро бидуни қурбонии аниматсия барои баъзе корбарон истифода баред, роҳи истифодаи ҳарду техникаи аниматсия барои иҷрои оптималӣ, вобаста аз имкониятҳои браузер вуҷуд дорад. Ин китобхонаи JavaScript бо номи Modernizr -ро истифода мебарад, ки муайян мекунад, ки оё браузери корбар дорои хусусиятҳое ба монанди гузариши CSS мебошад, ки тавассути Modernizr.csstransitions, ки таъин шудааст дуруст ё дурӯғ вобаста ба дастгирии корбар барои гузариши CSS.
Дар сабти Masonry-и худ, ба шумо лозим аст, ки рамзи зеринро занг занед.
$ ('# Мундариҷа'). Девор ({
// ҳама имконоти дигари маснуот
isAnimated:! Modernizr.csstransitions
});
Ин роҳи беҳтарин барои иҷрои аниматсия аст, зеро шумо ба корбар таҷрибаи беҳтарини имконпазирро пешниҳод мекунед. Истифодабарандагоне, ки метавонанд аз гузаришҳои CSS истифода баранд, қодиранд ва ба онҳое, ки ҳоло ҳам нестанд, тавассути jQuery аниматсия дода мешаванд.
04. Масъалаҳои истифодаи корхона
Masonry дорои миқдори зиёди истифода дар Tumblr ва вебсайтҳои хурдтар аст ва барои оғози он ба қадри кофӣ осон аст. Аммо гузоштани он барои истифодаи корхона бозии тамоман дигарест, ки масъалаҳои худро берун аз тасвирҳо бо ҳам мепайвандад. То ба имрӯз, мо ҳамеша медонистем, ки чӣ миқдор ашё дар тарҳбандии Маседони мо меравад ва ҳеҷ гоҳ фикр намекардем, ки то он даме, ки ягон такриз набошад, ягон унсур ҷойгир карда шавад.
Калиди қариб ҳама масъалаҳо бо Masonry дубора барқарор мешавад, бинобар ин шумо метавонед ашёи нави худро чен карда, ба тарҳбандии худ дохил кунед. Баъзан инро гуфтан хеле осонтар аст, хусусан ҳангоми боркунӣ дар ифрамаҳо, мундариҷаи дарунсохт ё мундариҷа аз скрипти шахси сеюм. Шумо метавонед Masonry -ро барои чен кардани ин унсурҳо, ки ба шумо лозим аст, дароз кунед ва пас усули барқароркунии Masonry -ро ба таври зерин даъват кунед:
$ ('# Content'). Masonry ('reload');
Masonry ҷойгиркунии ҳар як хиштро бо нобаёнӣ оптимизатсия мекунад, аммо баъзан ба шумо порчаи мундариҷа лозим аст, то дар ҷойгоҳи ҷойгиршавӣ мутобиқат кунед. Агар ин ба шумо дахл дорад, Masonry дорои хусусияти ном дорад кунҷи тамға ба шумо имкон медиҳад, ки ҳамеша дар ҷои муайян хишт дошта бошед. Ин тавассути сарфаи фазои васлшаванда барои ин хишт ҳангоми ҳисоб кардани тарҳаш кор мекунад, ки барои таблиғи ҷойҳо ё маводи таблиғотӣ муфид аст. Маълумоти бештарро дар бораи инҷо пайдо кунед.
05. Хатогии Masonry
Агар шумо то ҳол мушкилот дошта бошед, он ҷо захираҳо мавҷуданд: консолатонро истифода баред ва бубинед, ки ин чӣ гап аст. Аз консол шумо метавонед имконотро навсозӣ кунед, усулҳоро бароред, паҳнои ва баландиро тафтиш кунед ва ғайраро. Пас, агар як ё якчанд хишт дуруст чен карда нашуда бошад, шумо метавонед CSS-и худро аз асбобҳои браузер таҳрир кунед ва Masonry-ро дубора барқарор кунед, то бубинед, ки тағиротҳои шумо муваффақ шудаанд ё не. Маълумот аз ҳар як мисоли Masonry низ дастрас аст. Шумо метавонед имконотро фавран таҳрир кунед ва бубинед, ки оё объекти Masoned-и шумо дуруст оғоз карда шудааст. Барои дидани ин, ба консол худ чизҳои зеринро ворид кунед.
$ ('# Content'). Data ('masonry');
Боз як идеяи олие барои ҳар касе, ки Masonry -ро истифода мебарад, ин аст, ки ба коди сарчашма дар GitHub назар андозед - онро худи DeSandro нигоҳ медорад. Агар шумо фикр кунед, ки чӣ гуна ченкунӣ рӯй медиҳад, шумо метавонед функсияеро пайдо кунед, ки инро иҷро мекунад тарҳбандӣ () ва _placeBrick (). Доштани тасаввуроти он, ки плагин дар дохили кишвар чӣ кор мекунад, муҳим аст, хусусан агар ин калиди муаррифии сайти шумо бошад.
Агар шумо воқеан дар ҳайрат афтед, шумо ҳамеша метавонед ба бахши Масъалаҳо дар GitHub муроҷиат кунед. Ҳангоми фиристодани масъала, кӯшиш кунед, ки то ҳадди имкон тавсифӣ дошта бошед ва ба он ҷое, ки мушкилот рух медиҳад, истинод ворид кунед. Дидани он, ки чӣ хато мекунад, ислоҳи хатогиро бениҳоят осон мекунад ва ҳамаи иштирокчиёни он вақтро сарфа мекунад. DeSandro дастурҳо оид ба пешниҳоди як масъаларо дар ҳисоби Github -и худ ҷойгир кардааст, ки шумо метавонед онро дар ин ҷо бубинед.
06. Хулоса
Умедворем, ки ин мақола ба шумо якчанд имкониятҳои Masonry-ро нишон дод - гарчанде ки ман танҳо ибтидои он чизеро, ки имконпазир аст, баррасӣ кардам ва ҳолатҳои истифодаи нав доимо таҳия карда мешаванд. Шумо метавонед Masonry-ро бо функсияҳо, ба монанди Scroll Infinite, якчанд мисолҳо ва ғайра васеъ намоед, то таҷрибаи корбаронро зиёдтар кунад. Masonry як василаи хубест, ки тарзи тарҳрезии одамон ва ҳамкорӣ бо онҳоро тағир додааст. Ин танҳо беҳтар хоҳад шуд, зеро шумораи бештари одамон ширкат варзанд ва саҳм гузоранд.
Ташаккур ба Ҷейкоб Ван Лун барои тасвирҳое, ки дар ин дастур истифода шудаанд
Люк Шумард ҳамчун тарроҳи калони вебсайти Dazed Digital ва AnOther, ду бузургтарин нашрияи мустақили мӯд ва тарзи ҳаёти Бритониё кор мекунад.
