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!