Trois façons super faciles de retirer une structure de maçonnerie

Les dispositions de style maçonnerie repoussent les limites des techniques de disposition créatives. J'aime personnellement leur capacité à maximiser l'efficacité des galeries contenant des objets de différentes hauteurs. Chaque espace d'écran est utilisé et le résultat peut être carrément hypnotisant.

Aujourd'hui, nous allons plonger dans le concept, les idées et les techniques populaires qui prévalent actuellement dans les dispositions de style maçonnerie. Nous allons apprendre trois méthodes différentes pour réaliser une mise en page en maçonnerie, en expliquer les tenants et les aboutissants et veiller à ce que le résultat soit magnifiquement réactif et réponde en fonction de la largeur du navigateur.

Qu'est-ce qu'une structure de maçonnerie?

Lorsque vous faites flotter des objets en CSS, le navigateur organise d'abord les éléments horizontalement, puis verticalement. Lorsque nous remplissons un conteneur avec un tas d'objets de taille égale et que nous les faisons flotter à gauche, nous obtenons une belle grille d'images.

Cependant, si les objets ont des hauteurs variables, les résultats sont beaucoup plus difficiles à prédire. Au lieu d'une belle grille serrée, nous obtenons quelque chose qui a tendance à être assez dispersé.

Le dilemme évident ici est de savoir comment réaliser une belle grille serrée avec des articles de hauteurs variables. C'est un sujet assez intéressant et divers développeurs ont mis au point plusieurs façons de s'y prendre. Jetons un coup d'œil à trois des meilleures solutions actuelles.

Pour aller plus loin, nous allons nous assurer que les trois solutions sont réactives, ce qui signifie que la grille sera refondue à mesure que la taille de la fenêtre change.

jQuery maçonnerie

La maçonnerie jQuery est la solution la plus populaire pour ce type de mise en page. Il utilise du code JavaScript assez sophistiqué pour redistribuer une série de divs.

Mettre en pratique la maçonnerie est assez facile, tout ce dont vous avez besoin est un conteneur contenant une série de div que vous souhaitez organiser à la manière de la maçonnerie. Vous pouvez placer tout ce que vous voulez à l'intérieur des divs, dans ce cas, j'ai ajouté des images d'espace réservé.

Une fois que tout est en ordre, lancez jQuery et jQuery Masonry. Ensuite, vous devez créer une fonction simple qui identifie votre conteneur et cible la classe que nous avons utilisée pour nos div d'images de maçonnerie. Voici un exemple de base:

<img src="//lesptitesaffairesdemayl.be/img/images_1/three-super-easy-ways-to-pull-off-a-masonry-layout_4.jpg"> <h2>Wookmark</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/three-super-easy-ways-to-pull-off-a-masonry-layout_5.jpg"> <p>Wookmark.js est une autre solution JavaScript populaire permettant d’obtenir le même type de mise en page. Il s’agit du plug-in qui se cache derrière le Wookmark.com de type Pinterest.</p> <p>Wookmark.js est à mon avis un peu plus compliqué à implémenter que jQuery Masonry à cause du manque de documentation, mais ça reste assez basique. Tout ce que nous avons à faire pour commencer est de lancer un tas d’images dans une liste non ordonnée. Le problème avec ce plugin est que nous devons déclarer des valeurs de hauteur inline pour chacune des images.</p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/three-super-easy-ways-to-pull-off-a-masonry-layout_6.jpg"> <h2>CSS pur</h2> <p>Les solutions JavaScript sont probablement les moyens les plus sûrs et les plus compatibles d’utiliser une structure en maçonnerie, mais le nerd CSS en moi savait qu’il devait exister un moyen de le retirer sans JavaScript.</p> <p>Il s’avère qu’il est assez facile d’utiliser du CSS3 sophistiqué. Radu Chelariu de SickDesigner a mis au point cette technique. Même si elle n'est pas aussi puissante, flexible ou compatible avec plusieurs navigateurs que les options précédentes, elle reste extrêmement impressionnante étant donné qu'elle est entièrement en CSS.</p> <p>Pour commencer, utilisons la même liste non ordonnée que celle que nous avons faite la dernière fois (aucun style en ligne nécessaire), insérée dans un conteneur div. </p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/three-super-easy-ways-to-pull-off-a-masonry-layout_7.jpg"> <h2>Conclusion</h2> <p>Dans un article récent sur Pinterest, j'ai expliqué à quel point les dispositions de maçonnerie peuvent être puissantes du point de vue de l'expérience utilisateur, en particulier lorsqu'elles sont combinées au défilement infini.</p> <p>Vous pouvez certainement vous attendre à ce que cette tendance naissante augmente en popularité et, avant même de vous en rendre compte, certains de vos clients demanderont un agencement similaire à celui présenté sur Pinterest. Lorsque cela se produit, vous serez désormais préparé avec non pas une mais trois solutions possibles!</p></li></ul>