Isotope est un plugin jQuery qui permet d’animer et de filter les blocs de votre page. Vous pouvez l’utiliser avec des images, divs, listes. Ce plugin est également responsive.
Par défaut les blocs sont ferrés à gauche. Si vous souhaitez que votre contenu soit centré, voici la méthode à suivre (avec Isotope V2) :
Cas 1 : les largeurs de blocs sont identiques et fixes
Il faut utiliser le layout mansonry avec l’option isFitWidth.
Il faut fixer une largeur aux colonnes.
masonry: { columnWidth: 100, //largeur des colonnes isFitWidth: true }
/* on centre le container en CSS */ .grid { margin: 0 auto; }
La largeur doit être fixe et non en pourcentage.
Démonstration
Cas 2 : les largeurs des blocs sont fluides et différentes
Pour un rendu fluide et responsive, on fixe la largeur des colonnes en pourcentage et elles vont automatiquement s’adapter à la largeur du container.
On utilise pour cela le layout masonry avec l’option columnWidth
<div class="grid"> <!-- .grid-sizer : élément vide, uniquement pour définir columWidth --> <div class="grid-sizer"></div> <div class="grid-item"></div> <div class="grid-item grid-item--width2"></div> ... </div>
/* fluid 5 columns */ .grid-sizer, .grid-item { width: 20%; } /* 2 columns wide */ .grid-item--width2 { width: 40%; }
$('.grid').isotope({ itemSelector: '.grid-item', percentPosition: true, masonry: { // on utilise la largeur de grid-sizer columnWidth: '.grid-sizer' } })
Article fort sympathique, une lecture agréable. Ce blog est vraiment pas mal, et les sujets présents plutôt bons dans l’ensemble, bravo ! Virginie Brossard LETUDIANT.FR
Un très bon article et très intéressant, vraiment bien je ne vais pas hésiter à le recommander. Bonne continuation, Rudy.
Une véritable mine d’or cette article. Excellent je recommande ! Bonne continuation. Cordialement.