Мазмун
- 01. Масон орнотуу
- 02. Сүрөттөр менен байланышкан маселелер
- 03. Өнүккөн колдонуучулар үчүн идеялар
- 04. Ишкананы пайдалануу маселелери
- 05. Масондук оңдоо
- 06. Жыйынтык
- Билим керек: Негизги HTML, CSS жана JavaScript / jQuery
- Талап кылат: Текст редактору, заманбап браузер
- Долбоордун убактысы: 1 саат
- Колдоо файлы 1
Бул макала биринчи жолу .net журналынын 229-санында чыккан.
Pinterestтин жарылышы анын дизайнын жана колдонуучунун тажрыйбасын жогору баалады. Бирок акыркы эки жылдан бери үңкүрдө жашабасаңыз, портфолио сайттары жана Tumblr эсептери сыяктуу көптөгөн кичинекей сайттарда ушундай түшүнүктү көргөн чыгарсыз. Бул Masonry, jQuery үчүн динамикалык сетка макетинин плагини аркылуу мүмкүн болду - Pinterest бул үчүн бажы сценарийин түздү, бирок түшүнүк Masonryдикине окшош. Masonry компаниясынын жаратуучусу Дэвид ДеСандро аны "CSSтин экинчи тарабы калкып жүрөт" деп сүрөттөйт. Салттуу CSS калкымаларында объекттер горизонталдуу, андан кийин тигинен жайгаштырылат. Масонирование муну жокко чыгарат жана тармакта орунду оптималдаштыра алат.
Масондук сиз тейлеп жаткан нерселердин бардыгын өлчөп, мейкиндиктеги нерселер менен аларды мыкты иретте түзөт. Бул чечим, айрыкча, сүрөттөргө негизделген контент менен жакшы иштейт жана сүрөттөрдүн бири-бирине кесиндилерин бириктирип турат. Масонсуз мындай долбоор дээрлик мүмкүн эмес, бирок плагин аны JavaScriptтин бир нече сабында гана жеткиликтүү кылат.
01. Масон орнотуу
Баштоодон мурун, сизде HTML, CSS жана JavaScript орнотулган болушу керек. Мен мунун жөнөкөйлөтүлгөн версиясын HTML5 Boilerplateден киргиздим. Ичинде demo.html файл, мен Masonry тарабынан салынышын каалаган 10 ар кандай элементтерди коштум. Бул элементтердин ар биринин классы бар пункт жана жөн гана сүрөттү камтыйт. Биздин style.css файл бул элементтердин негизги стилдерин жарыялайт, аларды жасайт 300px кенен, дисплей блок, калкып өтүү сол жана жогорку жана оң чети бар 20px.
Келгиле, бул Массажды колдонуудан мурун кандай болгонун карап көрөлү. Демо файлдарыңызда комментарий калтырыңыз script.js түбүндө demo.html "Массиз" макет үчүн файл. Сүрөттөрдүн ортосундагы тик аралыгы дал келбестигин байкайсыз: бир катарда узунураак сүрөттөр башка элементтердин астында боштук жаратып, сиздин жайгашууңузду шалаакы кылат. Сиз көзөмөлдөгөн бардык элементтердин же статикалык мазмунунун белгилүү бир кесилген өлчөмү болбосо, бир катар мазмундагы чагылдырылган чечим татаал болушу мүмкүн. Масондук бул жерде жаркырап, динамикалык мазмунуңуздун планын тез арада оптималдаштырат.
Масондукту колдонууга даярбыз, андыктан комментарий бербеңиз script.js. Түзүү $ (документ). даяр () иштеп, биздин контейнердеги Масон функциясын атаңыз.
$ (document) .ready (function () {
$ (’# Камтылганы’). Кыш ({
columnWidth: 320,
itemSelector: '.item'
}). imagesLoaded (function () {
$ ('# Камтылганы'). Кыш ('кайра жүктөө');
});
});
Жыгаччылыктын бир нече варианты бар, бирок булар эң керектүү эки нерсе. columnWidth ар бир тилке үчүн минималдуу туурасын аныктайт. Бул кошумча толтуруу жана четтерин эске алат, андыктан 320 - 300 пикселдик туурасы жана 20 пикселдик оң жактагы сүрөт. itemSelector Masonry таасир эте турган бардык нерселер үчүн CSS селекторун көрсөтөт. Ошондой эле, аталган Masonry менен жеткирилген плагинди чакырып жатабыз imagesLoaded Бул Masonryге кайрадан жүктөө керектигин айтат - бирок кийинчерээк буга жетишебиз.
Эми жыйынтыгын карап көрөлү; буга кандайча жетишилгенин түшүнүү өтө маанилүү. Азыр биздин Masonry контейнери, # мазмунун, классы берилди .masonry жана пиксел менен салыштырмалуу абалы жана катуу коду бийиктиги берилет. Бул эмне, ар бир элементтин, же кыштын абсолюттук абалда жайгаштырылышына мүмкүндүк берет, ал кыштын туурасы жана бийиктиги боюнча сол жана сол өлчөө.
02. Сүрөттөр менен байланышкан маселелер
Масондукка байланыштуу эң көп кездешкен маселелердин бири - бул элементтер, айрыкча сүрөттөр бири-биринин үстүнөн бири-бирине дал келиши. Жөндөө бар кирпичти өлчөө менен иштейт жана ошол өлчөөлөрдүн негизинде ар бирине туура келет. Масондук элементтерди ченегенде, сүрөттөр жүктөлбөй калышы мүмкүн - ошондуктан, таштар кыштын көлөмүн сүрөтсүз өлчөйт. Бул сүрөттүн толук бийиктигине (же туурасына) ээ болуунун ордуна, ал бир гана сапты ээлейт.
Муну жеңүүнүн ар кандай жолдору бар; ар биринин оң жана терс жактары бар. Эң кеңири таралган чечим - бардык сүрөттөр браузерде жүктөлгөнчө күтүп, андан кийин Masonry инициалын орнотуу. Муну колдонуу менен ишке ашыра аласыз $ (window) .load () ордуна $ (документ). даяр () кодуңузду баштоо үчүн. Бул Masonry үчүн керектүү натыйжаларды берет, ал эми сиз колдонуучу макети менен тааныштырылат күтүп. Ошондой эле, ал жерге отуруп калаардан мурун, сиздин макетсиз кыскача көз ирмемиңизди көрсөтөт. Акыры, бул чечим сиздин Masonry кодуңузду JavaScriptтин калган бөлүгүнөн алыстатат, ал сиздин логикаңызды бөлүп-жарып, эгерде коддун башка бөлүктөрү алгач Масонерчиликке негизделген болсо, анда башаламан болуп кетиши мүмкүн (Infinite Scroll сыяктуу).
Сиздин белгилөөңүздө ар бир сүрөт элементинин туурасы менен бийиктигин жазуу кыйла бекем чечим болуп саналат. Бул баалуулуктарды белгилөөдө, Masonry аларды туура өлчөйт жана анын көлөмүн аныктоо үчүн сүрөт жүктөлгөнгө чейин күтүүнүн кажети жок. Мунун бирден-бир маанилүү себеби, бул сиздин ар бир өлчөмүңүздүн болушун талап кылат жана маалымат базаңызда сакталат, бул дайыма эле мүмкүн боло бербейт.
Бул маселе кеңири жайылтылгандыктан, Масон жабдыктары менен imagesLoaded, плагин, ооба, сүрөттөрүңүз качан жүктөлгөнүн билдирет. imagesLoaded Бардык сүрөттөр жүктөлгөндөн кийин, кайра чалуу функциясы бар, бул Masonry инициалын орнотуу үчүн эң ыңгайлуу жер. Мен ар тараптуу вариантты Masonry кызматын чакыруу деп эсептейм document.ready жана сүрөттөр жүктөлгөндөн кийин кайра өлчөө. Бул үчүн, сиз Masonry колдонушубуз керек болот кайра жүктөө ыкма. Мен муну жактырам, анткени бул сиздин логикаңызды бир жерде сактоого мүмкүндүк берет жана сүрөттөр даяр болгондон кийин кайра өлчөөгө туура келет.
03. Өнүккөн колдонуучулар үчүн идеялар
Куттуктайбыз, сиз Masonry макетин түзүп алдыңыз, бирок бул Masonry жасай турган нерсенин бетин гана сызат. Баштапкы Masonry инстанциясын орнотуп бүткөндөн кийин, аны плагинин ыкмалары менен өзгөртө аласыз. Бул сиз каалаган нерсени жасоого жардам берүүчү масондукка орнотулган кошумча функциялар, мисалы, буюмдарды кошуу жана жок кылуу, кыш өлчөмдөрүн кайрадан өлчөө жана башка көптөгөн нерселер. Ошондой эле, жаңы кирпич кошуп, жада калса RTL колдоосу менен, мазмунду жандандыруу мүмкүнчүлүктөрүңүз бар. Биздин мисал үчүн, анимацияланган ийкемдүү туураны түзөлү. Туурасын өзгөртүү # мазмунун автоунага жана маржа солго жана маржа оңго авто in style.css.
#content {
маржа: 0 авто;
туурасы: авто;
}
Ошондой эле, орнотушубуз керек isFitWidth биздин Masonry орнотууга ылайык script.js. isFitWidth браузердин учурдагы туурасы үчүн мүмкүн болгон эң чоң мамыча санын аныктоо үчүн Masonry'деги параметр болуп саналат. Бул ыңгайсыз боштуктар жок мазмунду борборлоштуруу үчүн абдан пайдалуу; Ансыз, Masonry колонна сыяктуу кенен болбогон калган мейкиндикти кармайт, бул сиздин контейнериңиз эч качан чындап борборлошпойт дегенди билдирет.
$ (’# Камтылганы’). Кыш ({
// башка таш ыкмалары
isFitWidth: true
});
Браузерде Жаңыртууну басыңыз: эми браузериңиздин көлөмүн өзгөртө аласыз, ошондо Masonry контейнери анын туурасын кайра эсептеп, канча тилке көрсөтө алат.
Ошондой эле, кирпич жаңы позицияларына киришип жатып, бул кирпичтерди жандана алат сол жана жогорку Ар бир кыштагы CSS мааниси. Буга жетүүнүн ар кандай жолдору бар, кээ бири башкаларга караганда жакшыраак. Эң көрүнүктүүсү - jQuery колдонуп, аны чалсаңыз болот isAmimated: true масондукка чалып жатканда.
Бул жумушту аткарат, бирок jQuery анимациясы DOM манипуляциясына таянат жана бир нече чоң кыштын болушу анимациянын иштешин жайлатып, тажрыйбаны солгун сезиши мүмкүн. Аны ишке ашыруунун дагы бир жолу - бул анимациялык CSS өткөөлдөрүн колдонуу сол жана жогорку CSS касиеттери. CSQ өтүүлөрүн jQuery анимациясынын үстүнөн колдонуунун бардык артыкчылыктарына токтолуу - бул өзүнчө талкуу, бирок анимацияларды жасоо үчүн CSSти колдонуу кыйла күчтүү жана дээрлик бардык шарттарда Masonry менен жакшы натыйжаларды берет. CSS өтүүлөрүн колдонуу үчүн, ушул баалуулуктарды коюңуз .item in style.css, уруксат берүү сол анын жаңы маанисине өтүү, андан кийин жогорку бир жолу сол анимация кылды.
-webkit-өткөөл: сол .4s оңой чыгып кетүү, жогорку .4s оңойлук менен чыгуу .4s;
-moz-өткөөл: сол .4s оңой чыгып кетүү, жогорку .4s оңойлук менен чыгуу .4s;
-ms-өткөөл: сол .4s оңой чыгып кетүү, жогорку .4s оңойлук менен чыгуу .4s;
-o-өткөөл: сол .4s оңой чыгып кетүү, жогорку .4s оңойлук менен чыгуу .4s;
өтүү: сол .4s оңой-жылы-чыгып, жогорку .4s оңой-жылы .4s;
Өткөн жылы CSS өтүүлөрүн колдоо күчөп кеткени менен, аудиторияңыздын көпчүлүк бөлүгүн түзө турган эски браузерлер аларды колдобойт. Эгер сиз кээ бир колдонуучулар үчүн анимацияны жоготпой CSS өткөөлдөрүн колдонууну кааласаңыз, анда браузердин мүмкүнчүлүктөрүнө жараша оптималдуу иштөө үчүн анимациянын эки ыкмасын тең колдонуунун жолу бар. Бул Modernizr деп аталган JavaScript китепканасын колдонот, анда колдонуучунун браузери аркылуу CSS которуулары сыяктуу функциялар бар же жок экендигин аныктайт. Modernizr.csstransitions, коюлган чындык же жалган колдонуучунун CSS өткөөлдөрүн колдоосуна жараша.
Сиздин Masonry орнотуу, сиз төмөнкү кодду чакыруу керек болот.
$ (’# Камтылганы’). Кыш ({
// башка бардык камдык параметрлер
isAnimated:! Modernizr.csstransitions
});
Бул анимацияны жүргүзүүнүн идеалдуу жолу, анткени колдонуучуга колдон келген тажрыйбаны сунуштап жатасыз. CSS өтүүлөрүн колдоно алган колдонуучулар мүмкүнчүлүк алышат, ал эми жокторго дагы анимация jQuery аркылуу берилет.
04. Ишкананы пайдалануу маселелери
Масондук Tumblr жана кичинекей веб-сайттарда көп колдонулат жана баштоо оңой. Бирок аны ишкана колдонуу үчүн орнотуу таптакыр башка оюн оюну, сүрөттөрдүн сыртындагы өз маселелери бири-бирине дал келген. Ушул убакка чейин, биз Masoned макетибизде канча буюм бар экендигин билип келгенбиз, жана кайсынысы бири-бирине дал келбесе, элементтердин кайсынысы коюлганын ойлогон эмеспиз.
Масондукка байланыштуу дээрлик бардык көйгөйлөрдүн ачкычы кайрадан жүктөлүүдө, андыктан жаңы нерселериңизди өлчөп, өзүңүздүн макетиңизге ылайыкташтырсаңыз болот. Айрым учурларда, айрыкча, iframe'лерге, камтылган мазмунга же үчүнчү жактын сценарийинен камтылгандарга караганда, бул айтылгандан кыйла жеңилирээк. Керектүү болуп, ушул элементтерди өлчөө үчүн Masonry кеңейтсеңиз болот, андан кийин Masonry компаниясынын кайра жүктөө ыкмасын колдонсоңуз болот:
$ ('# Камтылганы'). Кыш ('кайра жүктөө');
Массаж демейки шартта ар бир кыштын жайгашуусун оптималдаштырат, бирок кээде анын жайгаштырылган жерине шайкеш келиши үчүн, кээ бир материалдардын кереги бар. Эгер бул сизге тиешелүү болсо, анда Masonry аттуу өзгөчөлүгү бар cornerStamp ар дайым белгилүү бир жерде кыш болушуңузга мүмкүнчүлүк берет. Бул кирпичтин макетин эсептөөдө плагин үнөмдөөчү орун аркылуу иштейт, бул жарнамалык слоттор же жарнамалык материалдар үчүн пайдалуу. CornerStamp жөнүндө көбүрөөк маалыматты бул жерден таба аласыз.
05. Масондук оңдоо
Эгер сизде дагы деле көйгөйлөр бар болсо, ал жакта ресурстар бар: консолуңузду колдонуп, эмне болуп жаткандыгын көрүңүз. Консолдон сиз опцияларды жаңыртып, ыкмаларды чыгарып, туурасы менен бийиктигин текшере аласыз жана башкалар. Демек, эгер бир же бир нече кирпич туура өлчөнбөсө, анда CSSти браузердин куралдарынан түзөтүп, Masonry кызматын жүктөп, өзгөртүүлөрүңүз ийгиликтүү болгонун билип алыңыз. Масондордун ар бир мисалынан алынган маалыматтар дагы жеткиликтүү. Параметрлерди дароо оңдоп, Масондоштурулган объектиңиздин туура башталгандыгын көрө аласыз. Муну көрүү үчүн, төмөнкүнү консолуңузга териңиз.
$ ('# Камтылганы'). Маалыматтар ('дубал');
Masonry колдонуп жаткан дагы бир мыкты идея - бул GitHubтагы баштапкы кодду карап көрүү - аны DeSandro өзү колдойт. Эгер сиз өлчөө кандайча болот деп ойлонуп жатсаңыз, анда анын аткарган функциясын таба аласыз макет () жана _placeBrick (). Плагиндин ички иштери жөнүндө түшүнүккө ээ болуу, айрыкча, бул сиздин сайтыңыздын презентациясынын ачкычы болсо керек.
Эгер сиз чын эле мокоп калсаңыз, анда GitHub'тагы Issues бөлүмүнө ар дайым кайрылсаңыз болот. Маселени жайгаштырганда, мүмкүн болушунча сүрөттөмө берүүгө аракет кылып, көйгөй келип чыккан жерге шилтеме киргизиңиз. Кандай кемчиликтер болуп жаткандыгын көрө билүү мүчүлүштүктөрдү оңдоону чексиз жеңилдетет жана катышкан адамдардын бардыгына бир топ убакытты үнөмдөйт. DeSandro бул жерде көрө алган Github аккаунтуна маселе жөнөтүү боюнча көрсөтмөлөрдү жарыялаган.
06. Жыйынтык
Бул макала сизге бир нече масондук мүмкүнчүлүктөрдү көрсөттү деп үмүттөнөм - бирок мен мүмкүн болгон нерселердин башталышын гана чагылдырып, жаңы колдонулуш иштери тынымсыз иштелип жатат. Масондукту колдонуучунун тажрыйбасын кеңейтүү үчүн Infinite Scroll сыяктуу функциялар, бир нече мисалдар жана башкалар менен кеңейте аласыз. Masonry - бул адамдардын интернеттеги дизайнын жана өз ара аракетин өзгөрткөн мыкты плагин. Көп адамдар катышып, салым кошкондо гана, ал жакшырат.
Бул окуу куралында колдонулган сүрөттөр үчүн Джейкоб Ван Лонго рахмат
Люк Шумард Улуу Британиядагы эң ири көз карандысыз мода жана жашоо образдары болгон Dazed Digital жана AnOther гезиттеринин башкы дизайнери болуп иштейт.
