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: