Започнете с jQuery Masonry

  • Необходими знания: Основни HTML, CSS и JavaScript / jQuery
  • Изисква: Текстов редактор, модерен браузър
  • Време на проекта: Един час
  • Файл за поддръжка 1

Тази статия се появи за първи път в брой 229 на .net magazine.

Експлозията на Pinterest е видял неговия дизайн и потребителски опит похвален. Но освен ако не сте живели в пещера през последните две години, вероятно сте виждали подобна концепция на много по-малки сайтове, като портфолио сайтове и акаунти в Tumblr. Това е възможно чрез Зидария , приставка за динамично оформление на мрежа за jQuery - Pinterest създаде персонализиран скрипт за това, но концепцията е идентична с Masonry’s. Дейвид ДеСандро, създателят на Masonry, го описва като „обратната страна на CSS плувките“. В традиционните поплавъци на CSS обектите се подреждат хоризонтално, след това вертикално. Зидарията обръща това и може да оптимизира наличното пространство в мрежа.

С неотдавнашната експлозия на вниманието в Pinterest се засили акцентът върху масонството



С неотдавнашната експлозия на вниманието в Pinterest се засили акцентът върху масонството

Зидарията измерва всички предмети, които обслужвате, и ги пренарежда по най-добрия начин с това, което е достъпно в пространството. Това решение работи особено добре със съдържание, базирано на изображения, улесняващо практически безшевна стена от картини, събрани заедно. Без Masonry подобен дизайн би бил практически невъзможен, но приставката го прави постижим само в няколко реда JavaScript.

01. Настройване на зидария

Преди да започнете, ще ви е необходим основен HTML, CSS и JavaScript. Включих опростена версия на това от HTML5 Boilerplate . В demo.html файл, добавих 10 различни елемента, които искам да бъдат изложени от Masonry. Всеки от тези елементи има клас вещ и просто съдържа изображение. Нашите style.css файл декларира основните стилове за тези елементи, като ги прави 300px широк, дисплей блок , плувам наляво и имат горно и дясно поле от 20px .

Нека да разгледаме как изглежда това, преди да се приложи масонството. Във вашите демонстрационни файлове коментирайте script.js в долната част на demo.html файл за оформлението „неизолиран“. Ще забележите непостоянно вертикално разстояние между изображенията: по-високите изображения в един ред ще създадат празнина под останалите елементи, което ще направи оформлението ви небрежно. Освен ако нямате конкретен изрязан размер за всички елементи или статично съдържание, което контролирате, решение, показващо набор от съдържание по еднакъв начин, може да бъде сложно. Зидарията блести тук, оптимизирайки оформлението на динамичното ви съдържание в движение.

Готови сме да приложим масонството, така че коментирайте script.js . Създавам $ (документ). готов() функция и извикайте функцията Masonry на нашия контейнер за съдържание.

$ (документ) .ready (функция () {
$ ('# content'). зидария ({
широчина на колоната: 320,
itemSelector: '.item'
}). imagesLoaded (функция () {
$ ('# content'). masonry ('reload');
});
});

Зидарията има няколко налични опции, но това са двете основни. columnWidth определя минималната ширина за всяка колона. Това взема предвид подложките и полетата, така че 320 е за изображение с ширина 300 пиксела плюс 20 пиксела десен поле. itemSelector указва CSS селектора за всички елементи, които ще бъдат засегнати от масонството. Също така се обаждаме на приставка, изпратена с извикано Masonry imagesLoaded което казва на Masonry да се презареди - но ще стигнем до това по-късно.

Сега нека разгледаме резултата; критично е да се разбере как се постига това. Сега можем да видим, че нашият зидарен контейнер, #content , е даден клас на .масонство и му се дава относително положение и твърдо кодирана височина в пиксели. Това прави възможността всеки елемент или тухла да бъде позициониран абсолютно с точно измерване отгоре и отляво въз основа на ширината и височината на тухлата.

02. Издания с изображения

Един от най-често срещаните проблеми с масонството са елементи, особено изображения, които се припокриват един с друг. Зидарията работи чрез измерване на всяка налична тухла и съответства на всяка една от тях въз основа на тези измервания. Въпросът е, че когато Masonry измерва елементите, изображенията може да не се зареждат - така че Masonry ще измерва тухлата без размерите на изображението. Това означава, че вместо да има пълната височина (или ширина) на изображението, то ще заема само един ред.

Има различни начини да се преодолее това; всеки има плюсове и минуси. Най-често срещаното решение е да изчакате, докато всички изображения се заредят от браузъра и след това да инициализирате Masonry. Можете да постигнете това, като използвате $ (прозорец) .load () вместо $ (документ) .ready () за да започнете кода си. Докато това дава желания изход за зидарията, вие карате потребителя да чака да бъде представен с оформлението. Той също така ще покаже кратък момент от оформлението ви без зидария, преди да щракне на мястото си. И накрая, това решение отдалечава кода ви за зидария от останалата част от вашия JavaScript, което разделя вашата логика и може да се обърка, ако други части от кода ви разчитат първо на масонството (като безкрайно превъртане).

Ако активите ви не са предварително заредени, няма начин зидарите да измерват размера им, за да ги поставят правилно

Ако активите ви не са предварително заредени, няма начин зидарите да измерват размера им, за да ги поставят правилно

По-стабилно решение е изписването на ширината и височината на всеки елемент от изображението във вашата маркировка. Като има тези стойности в маркировката, Masonry ще ги измери правилно и няма нужда да чака, докато изображението се зареди, за да определи неговия размер. Единственият основен недостатък на това е, че той изисква да имате всяко измерение на разположение и да се съхранява във вашата база данни, което не винаги е възможно.

Тъй като този брой е широко разпространен, зидарията доставя с imagesLoaded , плъгин, който, да, ви казва, когато вашите изображения се зареждат. imagesLoaded има функция за обратно извикване, която се изпълнява, след като всички изображения са заредени, което е идеалното място за инициализиране на масонството. Смятам, че най-гъвкавият вариант е да се обадя на масонството document.ready и преизмерване след зареждане на изображения. За да направите това, ще трябва да използвате Masonry’s презареждане метод. Предпочитам това, защото ви позволява да запазите логиката си на едно място и принуждава повторното измерване, след като изображенията са готови.

03. Идеи за напреднали потребители

Поздравления, настроили сте оформлението на Masonry - но това само надрасква повърхността на това, което Masonry може да направи. След като настроите първоначалния си екземпляр на Masonry, можете да го промените, като използвате методите на приставката. Това са допълнителни функции, вградени в Masonry, за да му помогнат да прави точно това, което искате, като добавяне и изтриване на елементи, преизмерване на размерите на тухли и много други. Имате и опции за анимиране на съдържание, добавяне на нови тухли - дори RTL поддръжка. За нашия пример, нека създадем анимирана гъвкава ширина. Променете ширината на #content до автоматично и поле вляво и поле вдясно на Автоматичен в style.css .

#content {
марж: 0 автоматично;
ширина: автоматично;
}

Ние също трябва да настроим isFitWidth вярно на нашата масонска организация script.js . isFitWidth е опция в Masonry за определяне на възможно най-големия брой колони за текущата ширина на браузъра. Това е много полезно за центриране на съдържание без неудобни пропуски; без него Зидарията ще задържи остатъчното пространство, което не е толкова широко, колкото колона, което означава, че вашият контейнер никога не е истински центриран.

$ ('# content'). зидария ({
// други опции за зидария
isFitWidth: вярно
});

В браузъра натиснете Refresh: вече можете да преоразмерите браузъра си и контейнерът Masonry ще преизчисли ширината му, за да съответства на броя колони, които може да покаже.

Зидарията също може да оживи тези тухли, докато те отиват на новите си позиции, благодарение на логиката, която поставя наляво и връх CSS стойност за всяка тухла. Има различни начини да постигнете това, някои по-добри от други. Най-очевидно е да използвате jQuery, който можете да включите, като се обадите isAnimated: true при призоваване на масонството.

Това върши работата, но jQuery анимацията разчита на DOM манипулация и наличието на няколко големи тухли може да забави изпълнението на анимацията и да накара опитът да се почувства бавен. Друг начин за постигането му е чрез използване на CSS преходи, които ще анимират наляво и връх CSS свойства. Разглеждането на всички предимства от използването на CSS преходи над анимациите на jQuery е напълно отделна дискусия, но използването на CSS за извършване на вашите анимации е много по-стабилно и ще работи по-добре при почти всички обстоятелства с масонството. За да използвате CSS преходи, поставете тези стойности .вещ в style.css , отдаване под наем наляво преход към новата му стойност, последван от връх веднъж наляво е направил анимация.

-webkit-преход: ляво .4s лекота-навлизане, отгоре .4s лекота-излизане .4s;
-moz-преход: ляво .4s лекота-навлизане, отгоре .4s лекота-излизане .4s;
-ms-преход: ляво .4s лекота-навлизане, отгоре .4s лекота-излизане .4s;
-o-преход: ляво .4s лекота-навлизане, отгоре .4s лекота-излизане .4s;
преход: ляво .4s лекота навлизане, отгоре .4s лекота навлизане .4s;

Въпреки че през изминалата година поддръжката на CSS преходи нарасна, те не се поддържат от по-стари браузъри, които може да съставляват голяма част от вашата аудитория. Ако искате да използвате CSS преходи, без да жертвате анимацията за някои потребители, има начин да използвате и двете техники за анимация за оптимална производителност, в зависимост от възможностите на браузъра. Това използва JavaScript библиотека, наречена Modernizr , който открива дали браузърът на потребителя има функции като CSS преходи, достъпни чрез Modernizr.cstransitions , което е настроено на вярно или невярно в зависимост от поддръжката на потребителя за CSS преходи.

При настройката на Masonry ще трябва да извикате следния код.

$ ('# content'). зидария ({
// всички други опции за зидария
isAnimated:! Modernizr.csstransitions
});

Това е идеалният начин за изпълнение на анимация, защото обслужвате възможно най-доброто изживяване на потребителя. Потребителите, които могат да се възползват от CSS преходите, могат, а тези, които не са, все още получават анимация чрез jQuery.

04. Проблеми с корпоративната употреба

Зидарията се използва много в Tumblr и по-малки уебсайтове и е достатъчно лесна за инициализиране. Но настройването му за корпоративна употреба е съвсем различна игра с топка, със собствени проблеми извън изображенията, които се припокриват. Досега винаги сме знаели колко елемента влизат в нашето Изградено оформление и не ни е интересувало къде е поставен някой от елементите, стига да няма припокриване.

Ключът към почти всички проблеми с масонството е презареждането, така че можете да измервате новите си елементи и да ги вписвате във вашето оформление. Понякога това е много по-лесно да се каже, отколкото да се направи, особено когато се зарежда в рамки, вградено съдържание или съдържание от скрипт на трета страна. Можете да разширите Masonry, за да измервате тези елементи, колкото е необходимо, и след това да извикате метода за презареждане на Masonry по следния начин:

$ ('# content'). masonry ('reload');

Зидарията ще оптимизира позиционирането на всяка тухла по подразбиране, но понякога се нуждаете от част от съдържанието, за да бъдете последователни къде е поставена. Ако това се отнася за вас, Masonry има черен извикан ъгъл Печат ви позволява винаги да имате тухла на определено място. Това работи чрез добавката, спестявайки място за тази тухла, когато се изчислява нейното оформление, което е полезно за рекламни слотове или рекламни материали. Намерете повече информация за cornerStamp тук .

05. Отстраняване на грешки в зидарията

Ако все още имате проблеми, там има ресурси: използвайте конзолата си и вижте какво се случва. От конзолата можете да актуализирате опции, методи на издаване, да проверявате ширини и височини и др. Така че, ако една или повече тухли не се измерват правилно, можете да редактирате CSS от инструментите на браузъра и да презаредите Masonry, за да видите дали промените са били успешни. Налични са и данните от всеки екземпляр на Masonry. Можете да редактирате опции в движение и да видите дали вашият измащен обект е инициализиран правилно. За да видите това, въведете следното в конзолата си.

$ ('# съдържание'). данни ('зидария');

Друга чудесна идея за всеки, който използва масонството, е да погледнете изходния код на GitHub - поддържа се от самия DeSandro. Ако се чудите как се случва измерването, можете да намерите функцията, която прави това оформление () и _placeBrick () . Важно е да имате представа какво прави приставката вътрешно, особено ако това е ключово за презентацията на вашия сайт.

Ако наистина сте затрупани, винаги можете обърнете се към раздела Проблеми на GitHub . Когато публикувате проблем, опитайте се да бъдете възможно най-описателни и да включите връзка към мястото, където се появява проблемът. Възможността да видите какво се случва прави безкрайното отстраняване на грешки и ще спести значително време на всички участващи. DeSandro публикува насоки за подаване на проблем в своя акаунт в Github, които можете да видите тук .

06. Заключение

Надяваме се, че тази статия ви е показала няколко от възможностите на Masonry - макар че съм обхванал само началото на възможното и непрекъснато се разработват нови случаи на употреба. Можете да разширите Masonry с функционалност като Infinite Scroll, множество копия и други, за да увеличите максимално потребителското изживяване. Зидарията е чудесен плъгин, който промени начина, по който хората проектират и взаимодействат с мрежата. Ще стане по-добро, тъй като повече хора участват и допринасят.

Благодарение на Джейкъб Ван Лун за изображенията, използвани в този урок

Люк Шумърд работи като старши уеб дизайнер за Dazed Digital и AnOther, две от най-големите независими публикации за мода и начин на живот във Великобритания.