Les 10 grilles jQuery les plus fascinantes

jQuery est généralement le premier choix de la plupart des gens qui souhaitent se plonger dans la programmation JavaScript car il offre une méthode simple pour sélectionner des éléments HTML et manipuler le DOM. jQuery est très populaire, selon les récentes statistiques de W3Techs, “jQuery est utilisé par 95,4% des sites Web dont nous connaissons la bibliothèque JavaScript.”

jQuery est également utilisé par de nombreuses bibliothèques JavaScript comme dépendance et la version alpha de la nouvelle version majeure, jQuery 3.0, est déjà disponible. Si votre projet utilise jQuery de quelque manière que ce soit et que vous voulez un mise en page dynamique et flexible pour votre conception, il est utile d’envisager d’inclure un plugin de grille jQuery dans votre pile frontale.

Comment fonctionnent les grilles jQuery?

Les grilles jQuery vous permettent créer des mises en page de type Pinterest pour votre site. Ils fonctionnent comme une matrice virtuelle, ils suivent la “boîte dans une boîte” principe. Les grilles jQuery calculent dynamiquement quelle est la meilleure disposition des éléments et y remplissent la page de manière à laisser le moins d'espace possible, comme ce que vous voyez dans ces zones.

L'avantage principal des grilles jQuery par rapport aux grilles CSS est qu'elles fonctionnent avec des images ou d'autres éléments multimédias de différentes largeurs et hauteurs. De jolis effets JavaScript sont également une bonne raison d'utiliser les grilles jQuery pour créer une mise en page moderne.

Dans ce post, vous pouvez lire sur le 10 grilles jQuery les plus fascinantes qui sont actuellement sur le marché - bien sûr, tout comme jQuery, tous sont open-source et gratuits.

1. jQuery imbriqué

jQuery Nested vous fournit un outil pratique mise en page multi-colonne qui est sensible et fonctionne sur toutes sortes d'appareils. Ce plugin jQuery s’annonce comme étant totalement sans lacunes. Au début, ce slogan peut sembler une astuce marketing peu coûteuse, mais le plug-in accomplit très bien la liberté d’écart, tout comme le promettaient ses créateurs..

jQuery Nested suit un script unique dans remplir la matrice. Premièrement, il crée une grille multi-colonnes, puis il balaye la matrice pour y trouver des espaces et les remplit en réorganisant les différents éléments. Enfin - et c’est l’étape qui rend cette grille sans intervalle - elle redimensionne tout élément de la rangée inférieure qui n’entre pas dans l’espace.

2. mur libre

Freewall vous permet de créer la mise en page souhaitée, qu'il s'agisse d'une grille d'images, d'une grille imbriquée, d'une maçonnerie ou d'une grille de style métro. Il a beaucoup d'options que vous pouvez définir comme variables JavaScript telles que gutterX, gutterY, animer, cellW, cellH, etc. Il a des événements personnalisés tels que onGapFound et onResize, et des méthodes personnalisées aussi bien.

Vous pouvez trouver de beaux exemples de code sur leur site web. Les développeurs se souciaient aussi des pauvres âmes qui doivent encore concevoir des navigateurs plus anciens, donc Freewall supporte Internet Explorer 8, et il a aussi un solution pour JavaScript désactivé, comme il utilise Animations CSS 3 en tant que stratégie de secours JS. Consultez notre article sur Freewall ici.

3. maçonnerie

Le nom de la bonne vieille maçonnerie doit être familier aux oreilles de tous les concepteurs expérimentés. Si vous n'en avez pas entendu parler, la maçonnerie est un bibliothèque de disposition de grille en cascade qui fonctionne avec jQuery et JavaScript vanille.

Ce plugin pratique est la base de nombreux thèmes WordPress populaires. Vous n'avez même pas besoin de le télécharger sur votre serveur car vous pouvez facilement lier la bibliothèque directement à partir d'un CDN..

>