Układ strony Pinterest - tutorial

Zastanawialiście się kiedyś jak zrobićukład strony podobny do tego, który zobaczyć możemy między innymi w serwisie Pinterest? Pewnie większość z Was zna ten serwis – jeśli nie to spieszę wyjaśnić, że jest to serwis społecznościowy, w którym użytkownicy dzielą się z innymi swoimi zdjęciami. Wyróżnia się on ciekawym układem, w jaki prezentowane są zdjęcia. Generalnie chodzi o to, że „layout” podzielony jest na kolumny o określonej szerokości, a ilość tych kolumn zależy od szerokości okna przeglądarki. W układzie tym nie ma natomiast wierszy jako takich – zdjęcia układają się jedno pod drugim i wszystko generalnie odpowiednio „pływa”, nie ma też żadnych dziur. Zresztą jak ktoś nie widział to wystarczy sprawdzić jak to wygląda bezpośrednio w serwisie. W dzisiejszym wpisie przedstawię jak taki układ strony Pinterest uzyskać za pomocą specjalnej wtyczki jQuery.

A dlaczego o tym piszę? Ostatnio wspominałem już o jednej z wtyczek jQuery, której użyłem w swoim projekcie czytnika RSS. Dziś postanowiłem pokazać jeszcze jeden fajny „plugin”, który wtedy mi się przydał. A chodzi konkretnie o Wookmark jQuery Plugin. Sam Wookmark jest, zdaje się – nie wiem na pewno bo nie używałem – podobną do Pinterest’a społecznościówką, z takim samym układem strony. Zdecydowali się jednak udostępnić swoje rozwiązanie innym;)

Konfiguracja

Sama wtyczka jest banalnie prosta w konfiguracji. Wystarczy pobrać odpowiedni skrypt z GitHub’a, wgrać do projektu i podlinkować na stronie. Tak samo jak w przypadku „scrollera”, ja zrobiłem to za pomocą standardowo za pomocą „bundli” w ASP.NET MVC:

bundles.Add(new ScriptBundle("~/bundles/wookmark").Include(
                        "~/Scripts/jquery.wookmark.js",
                        "~/Scripts/Custom/wookmark.js"));

Jak widzicie, oprócz skryptu wtyczki załączam jeszcze plik „wookmark.js”, który znajduje się w folderze „Custom”. To w tym skrypcie, przeprowadzam inicjalizację „pluginu”. Oto zawartość tego pliku:

Wookmark = (function () {
    function init() {
        $(document).ready(function () {
            $('.folderContainer').wookmark({
                align: 'center',
                autoResize: false,
                container: $('#wookmarkContainer'),
                itemWidth: 0,
                offset: 5,
                resizeDelay: 50,
                flexibleWidth: 0,
                onLayoutChanged: undefined
            });
        });
    }

    return {
        Init: init
    };
} ());

Widać więc, że inicjalizacja ta jest bardzo prosta. Wszystko wykonuje się w funkcji zwrotnej (ang. callback), na „document ready”. Aby włączyć Pinterest’owy layout, wystarczy wywołać na rzecz wybranych kontenerów (chodzi o kontenery zawierające konkretny element „layoutu” czyli na przykład zdjęcie – jak widać wybieram je po nazwie klasy CSS więc może być ich więcej) funkcję „wookmark” i przekazać jej jako parametr obiekt zawierający wszystkie potrzebne ustawienia. U mnie są to między innymi wycentrowanie zawartości, wyłączenie automatycznej zmiany rozmiaru (używam tego w kontenerze, który ma stały rozmiar) czy też za pomocą właściwości „container” ustalam względem jakiego kontenera mają się pozycjonować elementy.

Układ strony Pinterest - podsumowanie

Oczywiście nie są to wszystkie możliwości konfiguracji – ze wszystkimi możecie zapoznać się na stronie projektu. Jeśli przewiniecie na sam dół podanej strony, możecie zobaczyć jak wygląda efekt w praktyce. I to tyle na dziś – jeśli kiedyś będziecie chcieli uzyskać układ strony Pinterest, pamiętajcie o tej wtyczce!