De 10 mest fascinerande jQuery-rutorna
jQuery är vanligtvis det första valet för de flesta som vill doppa fötterna i JavaScript-programmering, eftersom det ger en enkel metod att välja HTML-element och manipulera DOM. jQuery är väldigt populär, enligt W3Techs senaste statistik, “jQuery används av 95,4% av alla webbplatser vars JavaScript-bibliotek vi känner till.”
jQuery används också av många JavaScript-bibliotek som ett beroende, och alfaversionen av den nya stora versionen, jQuery 3.0 finns redan där ute. Om ditt projekt använder jQuery på något sätt och du vill ha en dynamisk, flexibel layout För din design är det värt att överväga att inkludera ett jQuery-nätplugg i din frontend-stapel.
Hur fungerar jQuery Grids?
jQuery-nät ger dig det skapa Pinterest-liknande layouter för din webbplats. De fungerar som en virtuell matris, de följer “lådan inuti en låda” princip. jQuery-rutor beräknar dynamiskt vad som är det bästa arrangemanget av objekt och fyller sidan med dem på ett sätt som lämnar minst tomt utrymme, något som du ser i dessa lådor här.
Den största fördelen med jQuery-nät i jämförelse med CSS-nät är att de fungerar med bilder eller andra medieelement som har olika bredder och höjder. Cool JavaScript-effekter är också en stor anledning att använda jQuery-nät för att skapa en modern layout.
I det här inlägget kan du läsa om 10 mest fascinerande jQuery-nät som för närvarande är ute på marknaden - naturligtvis, precis som jQuery, alla är öppna och gratis.
1. jQuery Nested
jQuery Nested ger dig en praktisk multi-column grid layout som är responsiv och fungerar över alla typer av enheter. Det här jQuery-pluginet annonserar sig själv som helt klyftsfritt. Först kan det här slogan vara ett billigt marknadsföringsverktyg, men plugin ger faktiskt gapfrihet mycket snyggt, precis som dess skapare lovade.
jQuery Nested följer ett unikt skript i fylla i nätmatrisen. Först skapar det ett flerkolonnät, sedan skannar matrisen för luckor och fyller dem genom att omordna de olika elementen. Slutligen - och det är steget som gör det här gallret gaplöst - det ändrar varje element i den nedre raden som inte passar ordentligt i gapet.
2. Freewall
Freewall låter dig skapa den layout du vill ha om det är ett bildgalleri, ett kapslingsnät, ett murverk eller ett tunnelbanesteg. Det har många alternativ som du kan ställa in som JavaScript-variabler som gutterX, gutterY, animera, cellW, cellH, etc. Det har anpassade händelser som onGapFound och onResize, och anpassade metoder också.
Du kan hitta fina kodexempel på deras hemsida. The devs bryr sig också om de stackars själar som fortfarande måste designa för äldre webbläsare, så Freewall stöder Internet Explorer 8, och det har också en lösning för handikappad JavaScript, som den använder CSS 3-animationer som en JS-fallbackstrategi. Kolla in vår artikel om Freewall här.
3. Murverk
Namnet på det goda gamla murverket måste vara bekant för alla erfarna designerens öron. Om du inte har hört talas om det, är Masonry a cascading rutnät layout bibliotek som fungerar med både jQuery och vanilla JavaScript.
Denna praktiska plugin är basen för många populära WordPress-teman. Du behöver inte ens ladda upp den till din server eftersom du enkelt kan länka biblioteket direkt från en CDN.
>
