Comprendre la disposition de la maçonnerie - SitePoint

Le paysage de conception Web moderne évolue constamment. Les listes de table et la pagination de décalage deviennent obsolètes, tandis que les dispositions de maçonnerie avec défilement infinie gagnent en popularité. Cet article plonge dans les subtilités des dispositions de maçonnerie et de leurs applications.

Prise des clés:

• Une disposition de maçonnerie, également connue sous le nom de disposition de style Pinterest, est une disposition de grille basée sur une colonne sans lignes de hauteur fixe. Il maximise l'espace en minimisant les lacunes.
• Les utilisations courantes incluent les galeries d'images, les articles de blog et les portefeuilles, en particulier bénéfiques lorsque les éléments ont des dimensions variables.
• La création de dispositions de maçonnerie nécessite souvent des calculs complexes; L'utilisation d'un plugin est généralement plus efficace. Les options populaires incluent la maçonnerie, le wookmark, l'isotope, le imbriqué et le freetile.js.
• Les fonctionnalités du plugin à considérer incluent le dimensionnement dynamique des colonnes, le tri / filtrage, l'animation, la gestion dynamique des éléments et les options de personnalisation de la disposition.

Comprendre les dispositions de maçonnerie:

Le terme "disposition de maçonnerie" provient probablement du populaire plugin de maçonnerie JQuery. Également appelée disposition de style Pinterest (en raison de l'adoption précoce de Pinterest), c'est une grille basée sur une colonne qui, contrairement aux grilles traditionnelles, évite les lignes de hauteur fixe. Cette utilisation optimisée de l'espace réduit les lacunes inutiles. Les dispositions traditionnelles basées sur le CSS, bien que courantes, ne tiennent pas compte de la taille des éléments, ajoutant des éléments horizontalement que verticalement, conduisant à un espacement inefficace.

En revanche, une disposition de maçonnerie s'ajuste dynamiquement, minimisant l'espace gaspillé et améliorant l'attrait visuel.

Disposages de maçonnerie en action:

Les dispositions de maçonnerie sont largement utilisées:

• Pinterest: Pinterest Exemple d'image
• thewall: thewall Exemple Image
• Erik Johansson Photographie: Erik Johansson Photography Exemple d'image
• thereason.us: thereason.us exemple image

Applications pratiques:

Les dispositions de maçonnerie offrent des avantages fonctionnels et esthétiques:

• Galeries d'images: Idéal pour les galeries avec des images de dimensions variables, en évitant le besoin de redimensionnement et de perte de qualité.
• Articles de blog: Permet des affichages de blog multi-colonnes sans tronquer des résumés de longueurs variables.
• Portefeuilles: Présente efficacement des projets, des conceptions ou d'autres articles de portefeuille.

Choisir une disposition de maçonnerie:

Avant d'implémenter une disposition de maçonnerie, considérez:

• Une disposition basée sur la grille est nécessaire.
• Les articles doivent avoir des dimensions diverses.
• Un nombre important d'articles sont nécessaires pour réaliser pleinement les avantages de la disposition.

Génération de dispositions de maçonnerie:

En raison de la complexité des calculs impliqués, l'utilisation d'un plugin est recommandée. Les choix populaires incluent:

• maçonnerie
• wookmark
• isotope
• imbriqué
• freetile.js

Caractéristiques du plugin de maçonnerie:

Bien que visuellement similaire, les plugins offrent des fonctionnalités distinctes. Les principales fonctionnalités à considérer incluent:

• Tailles de colonnes: Le dimensionnement dynamique des colonnes offre une plus grande flexibilité.
• Tri et filtrage: Active les ajustements de disposition dynamique sans restructuration.
• Animation: Améliore l'expérience utilisateur en animant les changements de mise en page.
• Éléments dynamiques: Permet d'ajouter / supprimer les éléments sans rafraîchissement de page.
• Options de mise en page: Personnalisation de la largeur de la colonne, de la taille du gouttière et de l'alignement.

Création d'une disposition de maçonnerie avec un plugin (exemple de maçonnerie.js):

Cet exemple utilise le plugin de maçonnerie populaire.js:

Étape 1: Inclure masonry.pkgd.min.js à la fin de votre HTML.

<code class="language-html"></code>

Étape 2: Créer des éléments avec des largeurs et des hauteurs variables, partageant une classe commune (par exemple, "élément").

<code class="language-html"><div id="masonry">
  <div class="item"></div>
  <div class="item"></div>
  <!-- ... more items ... -->
</div></code>

Étape 3: Initialiser le plugin de maçonnerie:

<code class="language-javascript">var container = document.querySelector('#masonry');
var masonry = new Masonry(container, {
  columnWidth: 50,
  itemSelector: '.item'
});</code>

Conclusion:

Les dispositions de maçonnerie sont facilement implémentées à l'aide de plugins. Expérimentez avec différents plugins et paramètres pour obtenir les résultats souhaités.

(Le reste du contenu original, y compris les FAQ, est omis pour la concision car il s'agit en grande partie d'une répétition d'informations déjà fournies et paraphrasées ci-dessus.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!