Zbuduj responsywne układy siatki z tym skryptem

Niestandardowe siatki to jedne z najtrudniejszych funkcji do tworzenia od podstaw. Możesz znaleźć mnóstwo wtyczek z siatki murarskiej, ale one każdy ma swoje ograniczenia i wymagania.

The Skrypt Muuri jest silną alternatywą dla każdego, kto potrzebuje sortowalne i reagujące elementy siatki z obsługą dotykową.

Jest wbudowany Velocity.js dla animacji, razem z Biblioteka Hammer.js do obsługi mobilnego dotyku. Muuri nie wymagaj jQuery, więc jest to jedna z niewielu wtyczek JavaScript dla interfejsów gridowych.

Na głównej stronie projektu znajdziesz piękne demo siatki ze wszystkimi funkcjami. Efekty animacji, obsługa przeciągnij i upuść oraz różne elementy siatki o różnych rozmiarach. To demo pokazuje, jak dużo kontroli masz z siatką Muuri.

Możesz wybrać które elementy wyświetlać, w oparciu o klasy (tj. filtrowanie) wraz z jak chcesz wypełnić puste przestrzenie.

Siatki murarskie często pozostawiają puste miejsca, ponieważ elementy siatki nie zawsze idealnie do siebie pasują. Jest to dość typowe dla większych witryn, takich jak Pinterest. Chociaż możesz dodaj przeciągalne elementy siatki prawie każdy kontrolowany przez użytkownika interfejs.

Myśleć o profile społecznościowe z widżetowymi układami i jak będą działać. Albo pomyśl o tym niestandardowe listy zadań uruchamiane jako progresywne aplikacje internetowe na JavaScript. Na stronie Muuri jest naprawdę świetna demonstracja przedstawiająca przykładową listę rzeczy do zrobienia i jak może ona działać jako PWA na urządzeniach mobilnych.

Aby zacząć, po prostu dołącz wszystkie zależności JavaScript wraz ze skryptami Muuri. Możesz ściągnąć je przez npm lub pobrać kopię z repozytorium GitHub.

Więc ty utwórz element siatki kontenera i celuj za pomocą nowej instancji Muuri () metoda. Jest to całkiem proste i szczególnie łatwe w użyciu, kopiując fragmenty kodu z repozytorium GitHub.

Z pełne wsparcie dla wszystkich nowoczesnych przeglądarek (IE9 +) oraz interfejs dotykowy, ta wtyczka jest jedną z najlepszych funkcji do przeciągania i upuszczania siatki.

Dowiedz się więcej, czytając stronę domową Muuri i majstrując przy pokazach na żywo. To jest świetny system dla dynamicznych siatek i jego wciąż aktywny rozwój, więc możesz ufać, że ta wtyczka będzie dostępna na dłuższą metę.