Twórz szybkie układy siatki murowanej za pomocą Bricks.js

Zawsze było całkiem proste tworzyć siatki za pomocą jQuery, za pomocą wtyczek i darmowych samouczków od programistów.

Jednak siatki murowane są trudniejsze do zbudowania, ponieważ one nie pasują równomiernie do strony. Będziesz mieć szerokość o stałej wielkości dla kolumn, ale wysokości przedmiotów mogą się znacznie różnić.

Zrobić Pixel-perfect masonry grid potrzebujesz wtyczki takiej jak Bricks.js.

Ta wtyczka jest całkowicie otwarta i śmiesznie szybka. Będzie renderuj siatkę w mniej niż pół sekundy, nawet z dziesiątkami przedmiotów na stronie.

Większość ludzi rozpoznaje siatki murarskie z Pinteresta, ponieważ spopularyzowały układ. Ale od tego czasu stał się używane na wielu innych stronach internetowych, zbyt.

Aby zacząć korzystać z Bricks.js, będziesz potrzebować trochę treści i a domyślny układ strony. Zainstaluj wtyczkę bezpośrednio z npm lub przez GitHub, jeśli jest to łatwiejsze.

W początkowej konfiguracji przechodzisz trzy specyficzne parametry:

1. Pojemnik - za Element kontenera DOM na siatkę
2. zapakowane - na atrybut określa, jak elementy przepływają w siatce
3. Rozmiary - na tablica szerokości i rynien, zdefiniowany w pikselach

Wtyczka wykorzystuje wszystkie te wartości do automatyzacji siatki muru od podstaw.

I możesz nawet używaj go do nieskończonego ładowania jeśli chcesz mieć siatki murarskie, które działają jak Pinterest.

Sprawdź stronę demonstracyjną interaktywna siatka które możesz zmienić do testowania. ty zdefiniuj całkowitą liczbę elementów i zautomatyzuje proces, wyświetlając całkowity czas renderowania.

Na przykład testowałem siatkę 500 elementów i to tylko zajęło 13 milisekund ukończyć. Nie uwzględnia to czasu ładowania wszystkich 500 obrazów, ale 13 ms dla automatycznie wygenerowanej siatki jest bardzo imponujący.

Rozpocznij sam, pobierając pliki z GitHub i postępując zgodnie z instrukcjami instalacji. Na początku może się to wydawać mylące, ale im więcej się z tym bawisz, tym łatwiej jest je skonfigurować.