10 najbardziej fascynujących siatek jQuery

jQuery jest zwykle pierwszym wyborem dla większości ludzi, którzy chcą zanurzyć się w programowaniu JavaScript, ponieważ zapewnia łatwą metodę wyboru elementów HTML i manipulowania DOM. jQuery jest bardzo popularny, zgodnie z najnowszymi statystykami W3Techs, “Z jQuery korzysta 95,4% wszystkich witryn, których biblioteka JavaScript jest znana.”

jQuery jest również używane przez wiele bibliotek JavaScript jako zależność, a wersja alfa nowej wersji głównej, jQuery 3.0 jest już dostępna. Jeśli twój projekt używa jQuery w jakikolwiek sposób i chcesz dynamiczny, elastyczny układ dla twojego projektu warto rozważyć dołączenie wtyczki siatki jQuery do stosu frontendu.

Jak działają jQuery Grids?

Siatki jQuery pozwalają utwórz układy przypominające Pinterest na swojej stronie. Działają jak wirtualna matryca, podążają za “pudełko w pudełku” zasada. Siatki jQuery dynamicznie obliczają, jaka jest najlepsza aranżacja przedmiotów i wypełniają je nimi w sposób, który pozostawia najmniej pustego miejsca, coś takiego, co widać w tych polach tutaj.

Główną zaletą siatek jQuery w porównaniu z siatkami CSS jest to, że działają z obrazami lub innymi elementami multimedialnymi, które mają różne szerokości i wysokości. Fajne efekty JavaScript są również dużym powodem, aby używać siatek jQuery do tworzenia nowoczesnego układu.

W tym poście możesz przeczytać o 10 najbardziej fascynujących siatek jQuery które są obecnie dostępne na rynku - oczywiście, podobnie jak jQuery, wszystkie z nich są otwarte i bezpłatne.

1. Zagnieżdżone jQuery

jQuery Nested zapewnia poręczne układ siatki wielu kolumn, który reaguje i działa na wszystkich rodzajach urządzeń. Ta wtyczka jQuery reklamuje się jako całkowicie wolna od luk. Początkowo hasło to może brzmieć jak sztuczka taniego marketingu, ale wtyczka bardzo dobrze wypełnia lukę, tak jak obiecali jej twórcy.

jQuery Nested podąża za unikalnym skryptem zapełnianie macierzy siatki. Najpierw tworzy siatkę wielokolumnową, następnie skanuje macierz pod kątem luk i wypełnia je, zmieniając kolejność różnych elementów. Wreszcie - i to jest ten krok, który czyni tę siatkę bez luk - zmienia rozmiar dowolnego elementu w dolnym rzędzie, który nie pasuje do szczeliny.

2. Freewall

Funkcja Freewall pozwala utworzyć układ, który chcesz, niezależnie od tego, czy jest to siatka obrazu, zagnieżdżona siatka, mur czy siatka w stylu metra. Ma wiele opcji, które można ustawić jako zmienne JavaScript, takie jak gutterX, rynna, animacja, cellW, cellH, itp. Ma niestandardowe wydarzenia, takie jak onGapFound i onResize, oraz metody niestandardowe.

Możesz znaleźć ładne przykłady kodu na swojej stronie internetowej. Deweloperzy troszczyli się również o biedne dusze, które wciąż muszą projektować dla starszych przeglądarek, więc Freewall obsługuje Internet Explorer 8, a także ma rozwiązanie dla wyłączonego JavaScript, jak to używa Animacje CSS 3 jako strategia awaryjna JS. Sprawdź nasz artykuł na temat Freewall tutaj.

3. Murarstwo

Nazwa dobrego starego muru musi być znana uszy każdego doświadczonego projektanta. W przypadku, gdy o tym nie słyszałeś, masoneria jest biblioteka układu siatki kaskadowej to działa zarówno z jQuery, jak i vanilla JavaScript.

Ta wygodna wtyczka jest podstawą wielu popularnych motywów WordPress. Nie musisz nawet przesyłać go na serwer, ponieważ możesz łatwo połączyć bibliotekę bezpośrednio z CDN.

>