Graphoeil Multimédia
Menu

Le plug-in jQuery Isotope

Présentation d'Isotope, un super plug-in pour gérer la position de vos divs

Découvrons aujourd'hui le plug-in Isotope qui va nous permettre de gérer la position des divs dans leur conteneur. J'ai utilisé ce plug-in dans la page Infos Literie du site d'Artois Literie à Saint-Omer.

Un div conteneur et ses div.grid

Pour pourvoir utiliser Isotope nous devons créer un div qui contiendra l'ensemble des divs à gérer et lui attribuer la classe grid, tout les divs que nous souhaitons aligner devront avoir la classe grid-item.

<div class="grid"> <div class="grid-item carre rouge"></div> <div class="grid-item carre vert"></div> <div class="grid-item carre bleu"></div> <div class="grid-item carre orange"></div> <div class="grid-item carre jaune"></div> <div class="grid-item carre rose"></div> </div>

Un peu de CSS pour styliser l'ensemble.

La stylisation n'affectera pas le plug-in Isotope qui génère des styles inline pour adapter les .grid-item à leur .grid.

.grid{ display:block; width:80%; height:450px !important; margin:0 auto 30px auto; } .carre{ display:block; width:33%; box-sizing:border-box; padding:10px; } .rouge{ height:130px; background-color:red; } .vert{ height:150px; background-color:green; } .bleu{ height:120px; background-color:blue; } .orange{ height:200px; background-color:orange; } .jaune{ height:170px; background-color:yellow; } .rose{ height:270px; background-color:pink; }

Isotope !

Il ne reste plus qu'à initialiser Isotope en jQuery. Astuce, si vous utilisez Isotope avec des images ou beaucoup de contenu, il faudra lors attendre le déclenchement de l'event window load plutôt que dom ready pour l'initialiser !

$(function(){ $('.grid').isotope({ itemSelector:'.grid-item', layoutMode:'masonry' }); });

Le résultat action

Surtout, amusez-vous à redimensionner la fenêtre de votre navigateur !

Conclusion

Isotope est parfait pour les galeries de photos, les pages de présentation de produits dans les boutiques en ligne, n'hésitez donc pas à l'utiliser lors de la création de vos sites internet.

Liens utiles

jQueryIsotope