De 10 meest fascinerende jQuery-rasters

jQuery is meestal de eerste keuze voor de meeste mensen die hun voeten willen onderdompelen in JavaScript-programmering, omdat het een eenvoudige methode biedt om HTML-elementen te selecteren en de DOM te manipuleren. jQuery is razend populair, volgens de recente statistieken van W3Techs, “jQuery wordt gebruikt door 95,4% van alle websites waarvan wij de JavaScript-bibliotheek kennen.”

jQuery wordt ook door veel JavaScript-bibliotheken als afhankelijkheid gebruikt en de alfaversie van de nieuwe belangrijke release, jQuery 3.0, is er al. Als uw project op enigerlei wijze jQuery gebruikt en u een dynamische, flexibele lay-out voor uw ontwerp is het de moeite waard om te overwegen om een ​​jQuery-grid-plug-in op te nemen in uw frontend-stack.

Hoe werken jQuery-rasters??

jQuery-rasters laten je maak Pinterest-achtige lay-outs voor uw site. Ze werken als een virtuele matrix, ze volgen de “vak in een doos” beginsel. jQuery-rasters berekenen dynamisch wat de beste rangschikking van items is en vullen de pagina daarmee op een manier die de minste lege ruimte achterlaat, zoiets als wat u hier in deze vakken ziet.

Het grote voordeel van jQuery-rasters ten opzichte van CSS-rasters is dat ze werken met afbeeldingen of andere media-elementen met verschillende breedten en hoogten. Coole JavaScript-effecten zijn ook een grote reden om jQuery-rasters te gebruiken om een ​​moderne lay-out te maken.

In dit bericht kun je lezen over de 10 meest fascinerende jQuery-rasters die momenteel op de markt zijn - natuurlijk, net als jQuery, ze zijn allemaal open source en gratis.

1. jQuery genest

jQuery Genest biedt u een handig multi-kolom rasterlay-out die reageert en werkt op allerlei verschillende apparaten. Deze jQuery-plug-in adverteert zichzelf als volledig vrij van splitsingen. In eerste instantie klinkt deze slogan misschien als een goedkope marketingtruc, maar de plug-in realiseert de kloofvrijheid heel goed, net zoals de makers beloofden.

jQuery Nested volgt een uniek script in het vullen van de matrix van het raster. Eerst wordt een raster met meerdere kolommen gemaakt, waarna de matrix wordt gescand op hiaten en deze wordt gevuld door de verschillende elementen opnieuw te ordenen. Eindelijk - en dat is de stap die dit raster gaploos maakt - het formaat van elk element in de onderste rij dat niet goed in de opening past, wordt aangepast.

2. Freewall

Met Freewall kunt u de gewenste lay-out maken, of het nu gaat om een ​​afbeeldingsraster, een genest raster, een metselwerk of een raster in de stijl van een metro. Het heeft veel opties die u kunt instellen als JavaScript-variabelen zoals gootX, gutterY, anim, cellW, cellH, enz. Het heeft aangepaste evenementen zoals onGapFound en onResize, en aangepaste methoden ook.

Je kunt leuke codevoorbeelden op hun website vinden. De ontwikkelaars hielden ook rekening met de arme zielen die nog moeten ontwerpen voor oudere browsers, dus ondersteunt Freewall Internet Explorer 8, en het heeft ook een oplossing voor uitgeschakeld JavaScript, zoals het gebruikt CSS 3-animaties als een JS-terugvalstrategie. Bekijk hier ons artikel over Freewall.

3. Metselwerk

De naam van de goede oude vrijmetselarij moet de oren zijn van elke ervaren ontwerper. Voor het geval je er nog nooit van gehoord hebt, is metselwerk een trapsgewijze opmaakbibliotheek die werkt met jQuery en vanille JavaScript.

Deze handige plug-in is de basis van veel populaire WordPress-thema's. U hoeft het zelfs niet naar uw server te uploaden, omdat u de bibliotheek eenvoudig rechtstreeks van een CDN kunt linken.

>