CementJS

L’idée de CementJS m’est venue quand j’ai commencé à utiliser Masonry. Icelui est un outils avancé et complet, mais il ne répondait pas à mes besoins. Je cherchais à ce moment à définir une taille sur mes éléments en HTML, et laisser le script gérer le positionnement tout seul. Comme il fallait mixer Masonry et du CSS spécifique à chaque élément, je me suis dit que développer petit plugin jQuery pour le faire serait sympa. J’avais en plus rencontré quelques problèmes de positionnement avec Masonry, et je voulais voir si j’étais capable de les corriger.

Il s’agissait certes d’un besoin, mais aussi d’un challenge. J’ai cherché à créer un plugin jQuery propre, qui accepte son lot d’options, tout en restant facile à utiliser.

Pour savoir si vous devez utiliser Masonry ou CementJS, poser vous cette question :

Est-ce que je veux que les lignes de ma grille soient de taille identique ?

Si c’est NON, alors dirigez-vous vers Masonry, qui fonctionne avec de simples colonnes dans lesquelles sont ajoutés les éléments, quelle que soit leur hauteur.
Si c’est OUI, alors CementJS est fait pour vous, car il travaille aussi sur les hauteurs de lignes pour donner un rendu final plus structuré.

Installation

Téléchargez cement.min.js (ou sa version non minifiée) sur GitHub
Incluez jQuery : <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Incluez CementJS : <script src="cement.min.js"></script>

Utilisation

Pour utiliser CementJS , il vous faut placer tous vos éléments dans un conteneur :

<section id="container">
  <article>…</article>
  <article>…</article>
  <article>…</article>
</section>

Une fois ceci en place, vous n’avez plus qu’à initialiser CementJS :

$('#container').cement();

Placer un élément sur plusieurs colonnes et/ou lignes

Pour qu’un élément ait une largeur de plusieurs colonnes, définissez ce nombre dans l’attribut data-w :

<article data-w="2">…</article>

Même chose pour les lignes, et vous pouvez combiner les deux attributs :

<article data-w="2" data-h="3">…</article>

Notez que si vous ne renseignez pas un de ces attributs, la valeur de celui-ci sera initialisée à 1.

Les options de CementJS

columns (valeur par défaut : 4) Nombre de colonnes dans votre grille.
columnMinWidth (valeur par défaut : 0) Largeur minimum des colonnes. Sous cette valeur, une colonnes est supprimée et la grille est recalculée. Fixez la valeur à 0 pour garder le même nombre de colonne, quelle que soit leur largeur.
brickSelector (valeur par défaut : > * ) Cible les éléments dans le conteneur.
horizontalGutter (valeur par défaut : 5) Taille des gouttières horizontales
verticalGutter (valeur par défaut : 5) Taille des gouttières verticales
transitionDuration (valeur par défaut : .2s) Durée des transitions CSS.

Liens

CementJS Le projet Github Masonry