Plugin JQuery pro optimální využití obrazovky
Optimalizace toho, jak je prostor použit na obrazovce, je klíčovou složkou dobrého návrhu webových stránek a především citlivého designu.
Existuje řada způsobů, jak přistupovat k tomuto problému a jeden z nejoblíbenějších je automatické uspořádání prvků uvnitř rodičovského kontejneru. Je to efektivní a když je dobře provedeno, vytváří uspořádání, které je vizuálně přitažlivé a funkčně optimální.
Pokud navrhujete reaktivní web, téměř jistě zjistíte, že je nutné uspořádat obsah dynamicky podle velikosti obrazovky zařízení uživatele. Automatické uspořádání obsahu má smysl, protože minimalizuje čas strávený přizpůsobením hraničních bodů pro každou stránku a každý prvek.
Stránky s neustále se měnícím obsahem (jako jsou blogy nebo online obchody) mohou obzvláště těžit z automatického uspořádání. Koneckonců, opravdu chcete, aby jste museli jít do kódu pro stránky svého klienta a upravit hraniční body a rozvržení, pokud se náhle rozhodnou začít psát delší nebo kratší příspěvky blogu?
Dělat vše od začátku je časově náročné a mimo schopnosti většiny návrhářů, kteří nejsou také vývojáři. Místo toho má smysl používat předem existující plugin nebo rámec.
JavaScript (včetně jQuery a dalších knihoven) je nejobvyklejším způsobem vytváření tohoto uspořádání, nejspíše kvůli jeho široké kompatibilitě. Takto fungují stávající snahy jako vGrid, Wookmark a Masonry.
Freetile.js je poslední plugin jQuery, který umožňuje tento druh dynamického, uspořádaného a přizpůsobivého rozvržení. Byl používán jako motor za Assemblage a Assemblage Plus téměř dva roky a nyní je konečně k dispozici jako nezávislý open source projekt.
Je to odlišné od stávajících snah v tomto prostoru z několika důvodů. Umožňuje použití libovolných prvků velikosti bez potřeby sloupce mřížky s pevnou velikostí. Tím se zbavíte nutnosti určit šířku sloupce odpovídající vašim prvkům. A můžete přizpůsobit algoritmus, který vyhodnocuje možné pozice vkládání pro každý prvek, což vám umožní vyjadřovat předvolby, jako je vyrovnání a blízkost.
Má inteligentní animační rutinu, která usnadňuje rozlišování mezi prvky, které by měly být animovány a které by neměly být. Určení animace v kódu je také snadné.
Použití Freetile.js je jednoduché. Dokonce i když nejste zkušení JavaScript, měli byste být schopni zjistit jeho použití velmi rychle.
Freetile.js je licencován pod licencí BSD a je k dispozici prostřednictvím služby GitHub.
Používali jste Freetile.js? Co jste stavěla? Sdílejte své zkušenosti v komentářích.