Explication détaillée de l'utilisation du plug-in_jquery de flux de cascade jQuery Masonry

Masonry est un plug-in de disposition de grille dynamique jQuery très puissant qui peut aider les développeurs à développer rapidement des effets d'interface similaires aux images clipart. La différence avec l'effet de float en CSS est que float est d'abord disposé horizontalement, puis verticalement. En utilisant Masonry, les éléments sont disposés verticalement, puis l'élément suivant est placé dans la zone de développement suivante de la grille. Cet effet minimise les écarts verticaux entre les éléments de hauteurs différentes. Comme suit :

Comme vous pouvez le voir sur l'image ci-dessus, l'utilisation de float pour traiter des éléments de différentes hauteurs dans une disposition en grille augmentera l'espacement entre les éléments dans la direction verticale, mais après avoir utilisé la maçonnerie, l'espacement deviendra plus petit.

Utilisation

Versez d'abord la bibliothèque de classe, comme suit :

Copier le code Le code est le suivant :

Ensuite, effectuez la maçonnerie sur le conteneur de l'élément, comme suit :

Copier le code Le code est le suivant :

$(function(){ 

$('#conteneur').maçonnerie({
// options
itemSelector : '.item',
largeur de colonne : 240
});
});

code html

Copier le code Le code est le suivant :

...

...

...

... 

css

Copier le code

Le code est le suivant :

.article { largeur : 220px ; marge : 10px ; flotter : gauche ; }

S'il y a des images dans l'élément que vous chargez, vous devez vous assurer que Masonry est exécuté une fois toutes les images chargées. Vous devez appeler le code suivant :

Copier le code

Le code est le suivant :

var $conteneur = $('#conteneur'); $container.imagesLoaded(function(){ $conteneur.maçonnerie({ itemSelector : '.item', largeur de colonne : 240