Uwielbiam minimalizm i 100% kontroli nad kodem, dlatego bardzo długo z nieufnością podchodziłem do jQuery. Teraz jednak widzę, jaki byłem niemądry, ta biblioteka ma naprawdę moc. Oczywiście bez przesady, są rzeczy, które łatwiej i szybciej się zrobi w gołym JavaScript, jednak w wielu przypadkach pozwala zaoszczędzić wiele pracy.
aTiles pozwala na wyświetlenie w ciekawy sposób galerii, newsów lub zajawek na blogu (tutaj też go używam). Od razu zastrzegam, że nie ja wymyśliłem algorytm. Uprościłem go tylko i oczyściłem ze zbędnych śmieci, dzięki czemu jest prosty, czytelny i efektywny (jak wspomniałem, uwielbiam minimalizm). Kod jest na tyle prosty, że nie ma sensu opisywać każdej linijki. Z pewnością dla większości będzie zrozumiały. Pozostali mogą go po prostu używać.
Załóżmy, że mamy trochę zajawek na blogu, albo zdjęcia w galerii, które trzeba wyświetlić na stronie. Plugin tworzy wirtualną tabelkę o szerokości kolumn określonej w pliku CSS i odstępach przekazanych w parametrze. Następnie wlewa moduły (niekoniecznie zdjęciowe) w odpowiednie miejsca, żeby całość zajmowała jak najmniejszą wysokość. Czyli każdy kolejny moduł będzie umieszczony w najkrótszej kolumnie.
Ilość kolumn jest zależna od szerokości kontenera. Wszytko jest responsywne i przy zmianie okna przeglądarki (albo na urządzeniach mobilnych) wszystko odpowiednio się dostosuje.
$(document).ready(function () { $("#TilesGallery").aTiles(); });