Wtyczka JQuery do optymalnego wykorzystania przestrzeni ekranu
Optymalizacja wykorzystania przestrzeni na ekranie jest kluczowym elementem dobrego projektowania stron internetowych, a zwłaszcza elastycznego projektowania.
Istnieje wiele sposobów podejścia do tego rodzaju wyzwań, a jednym z najbardziej popularnych jest automatyczne układanie elementów w kontenerze nadrzędnym. Jest wydajny, a po prawidłowym wykonaniu tworzy układ, który jest zarówno atrakcyjny wizualnie, jak i funkcjonalnie optymalny.
Jeśli projektujesz responsywną stronę, prawie na pewno znajdziesz potrzebę zmiany zawartości w sposób dynamiczny, w zależności od rozmiaru ekranu urządzenia użytkownika. Automatyczne porządkowanie zawartości ma sens, ponieważ minimalizuje czas dostosowywania punktów przerwania dla każdej strony i każdego elementu.
Witryny ze stale zmieniającymi się treściami (np. Blogi lub sklepy internetowe) mogą w szczególności skorzystać z automatycznej aranżacji. Ostatecznie, czy naprawdę chcesz przejść do kodu strony klienta i dostosować punkty przerwania i układ, jeśli nagle zdecydują się zacząć pisać dłuższe lub krótsze posty na blogu?
Wszystko to od zera jest czasochłonne i wykracza poza możliwości większości projektantów, którzy nie są również programistami. Zamiast tego rozsądnie jest użyć istniejącej wtyczki lub frameworka.
JavaScript (w tym jQuery i inne biblioteki) jest najczęstszym sposobem tworzenia tego rodzaju układu, najprawdopodobniej ze względu na szeroką kompatybilność krzyżową. Tak działają istniejące prace, takie jak vGrid, Wookmark i Masonry.
Freetile.js to najnowsza wtyczka jQuery, która umożliwia tego rodzaju dynamiczny, zorganizowany, responsywny layout. Był używany jako silnik Assemblage i Assemblage Plus przez prawie dwa lata, a teraz jest wreszcie dostępny jako niezależny projekt open source.
Różni się od istniejących wysiłków w tej przestrzeni z kilku powodów. Pozwala na użycie dowolnych rozmiarów elementów bez konieczności stosowania siatki słupów o ustalonym rozmiarze. To uwalnia cię od konieczności określania szerokości kolumny odpowiedniej dla twoich elementów. Można również dostosować algorytm, który ocenia możliwe pozycje wstawiania dla każdego elementu, pozwalając wyrazić preferencje, takie jak wyrównanie i bliskość.
Posiada inteligentną rutynę animacji, która ułatwia odróżnienie elementów, które powinny być animowane, a które nie. Określenie animacji w kodzie jest również łatwe.
Korzystanie z Freetile.js jest proste w użyciu. Nawet jeśli nie jesteś biegły w JavaScript, powinieneś być w stanie dość szybko zorientować się w jego wykorzystaniu.
Freetile.js jest licencjonowany na podstawie licencji BSD i jest dostępny za pośrednictwem GitHub.
Czy używałeś Freetile.js? Co zbudowałeś? Podziel się wrażeniami w komentarzach.