Exemple d'utilisation du plug-in de flux de cascade jQuery Wookmark_jquery

Téléchargement du plug-in : https://github.com/GBKS/Wookmark-jQuery Page d'accueil officielle : http://www.wookmark.com/jquery-plugin

Après avoir téléchargé le plug-in, référencez le fichier JS du plug-in dans la page web :

Copiez le code Le code est le suivant : Structure du code HTML : Copier le code Le le code est le suivant : Utilisation simple : ajouter du code dans un fichier html Copier le code Le code est le suivant : jQuery(function($){ $(' #tiles li').wookmark(); }); Utilisation complexe : Copier le code Le code est le suivant : jQuery(function($){ $('#tiles li').wookmark({ //Il s'agit de l'objet pour implémenter la disposition du flux en cascade autoResize : true, //Défini sur true pour indiquer que lorsque la taille de la fenêtre change, la disposition sera remaniée conteneur : $('#container' ), //C'est le nom du conteneur. Ce conteneur doit contenir un attribut css "position:relative" sinon vous verrez que tout est pressé dans le coin supérieur gauche de la page offset : 12, // La distance entre deux éléments adjacents itemWidth: 222, //La largeur de l'objet spécifié resizeDelay: 50 / /C'est l'effet de retard 50 }); }) ; wookmark peut également être utilisé avec ajax pour charger dynamiquement des données, mais new Il doit être réexécuté plus tard. Copier le code Le code est le suivant : var handler = $('#tiles li'); handler.wookmark(options); Si vous avez déjà lié l'événement, effacez-le avant de le réexécuter. Copier le code Le code est le suivant : handler.wookmarkClear(); Voir comparaison Beaucoup de gens demandent comment utiliser le chargement roulant. Voici un exemple pour expliquer : Copiez le code Le code est le suivant. suit : var handler = null; //Définir les attributs de base. var options = { autoResize : true, conteneur : $('#main'), offset : 2 , itemWidth: 210 };

//Définir la fonction de défilement function onScroll(event) { //S'il a atteint le bas (ici c'est pour juger si il est à 100 px du bas) Chargement des données). var closeToBottom = ($(window).scrollTop() $(window).height() > $(document).height() - 100); if(closeToBottom) { //Voici les données chargées par AJAX $.ajax({url:"data.html", dataType:"html", success:function(html){ //Ajouter de nouvelles données à l'objet $ ('#Waterfall'). Append (html); // Effacer le positionnement d'origine if (handler) handler.wookmarkClear (); // Créer un nouvel objet Wookmark handler = $('#waterfall li'); handler.wookmark(options); 🎜> $(document).ready(new function() { // Lier l'événement de défilement. $(document).bind('scroll', onScroll); //Première mise en page. handler = $('#waterfall li'); handler.wookmark( options); });