jQuery

Centrer les items isotope

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.

isotope

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.
isotope 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'
  }
})

démonstration

3 réponses à “Centrer les items isotope

  1. 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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *