Maison > Article > interface Web > Explication détaillée de la disposition du flux de cascade jQuery Masonry
Cet article présente principalement en détail l'utilisation de l'artefact de mise en page de cascade jQuery Masonry. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.
Lorsque j'ai récemment créé un site Web, une partie de celui-ci impliquait de nombreuses mises en page d'images et je voulais utiliser la mise en page Water Flow, plus populaire.
Je l'ai écrit moi-même au début, ce qui était vraiment gênant. Je n'ai pas pensé à vérifier la taille de l'image. Bien que cela puisse obtenir l'effet de mise en page, certaines images sont de taille relativement petite. mais sont agrandis de force. Voir Cela semble très discordant. Plus tard, j'ai effectué une recherche en ligne et découvert qu'il existe un très bon outil de mise en page du débit d'eau à utiliser. Faisons connaissance avec cet artefact~
Nom de l'artefact : JQuery Masonry, URL : http://masonry.desandro.com/index.html
La méthode d'utilisation est assez simple :
1. Marquez le conteneur et l'article qui doivent être disposés
La maçonnerie a besoin d'un conteneur pour charger des sous-éléments avec une structure similaire
<p id="container"> <p class="item">...</p> <p class="item">...</p> <p class="item">...</p> ... </p>
Ajoutez ensuite des références de script Jquery et Masonry à la page, nécessitant la version 1.6+ de jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="/path/to/jquery.masonry.min.js"></script>
2, écrivez CSS
La taille de tous les éléments qui doivent être disposés est déterminée par CSS, et tous les éléments doivent être flottants
par exemple :
.item { width: 220px; margin: 10px; float: left; }
3. Écrivez un script
Écrivez un script pour transmettre les paramètres de mise en page d'initialisation à laissez la disposition du conteneur automatiquement.
Il est fortement recommandé de configurer les paramètres itemSelector et columnWidth. Pour plus de configuration des paramètres, veuillez consulter le site officiel.
$(function(){ $('#container').masonry({ // options itemSelector : '.item', columnWidth : 240 }); });
OK, c'est fini. Si facile~
Voyons l'effet
Recommandations associées :
jQuery.lazyload+ maçonnerie code de flux de cascade d'image amélioré_Effets spéciaux d'image
explication détaillée de l'utilisation du plug-in de flux de cascade jQuery Masonry_jquery
Exemple JS d'implémentation du flux de cascade Analyse de mise en page
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!