Après avoir téléchargé le plug-in, référencez le fichier JS du plug-in dans la page web :
Structure du code HTML :
Utilisation simple : ajouter du code dans un fichier html
<script><br> jQuery(function($){<br> $(' #tiles li').wookmark();<br> });<br></script>
Utilisation complexe :
<script><br>jQuery(function($){<br> $('#tiles li').wookmark({ //Il s'agit de l'objet pour implémenter la disposition du flux en cascade<br> autoResize : true, //Défini sur true pour indiquer que lorsque la taille de la fenêtre change, la disposition sera remaniée <br> 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 <br> offset : 12, // La distance entre deux éléments adjacents <br> itemWidth: 222, //La largeur de l'objet spécifié <br> resizeDelay: 50 / /C'est l'effet de retard 50<br> });<br>}) ;<br></script>
wookmark peut également être utilisé avec ajax pour charger dynamiquement des données, mais new Il doit être réexécuté plus tard.
var handler = $('#tiles li');
handler.wookmark(options);
Si vous avez déjà lié l'événement, effacez-le avant de le réexécuter.
handler.wookmarkClear();
Voir comparaison Beaucoup de gens demandent comment utiliser le chargement roulant. Voici un exemple pour expliquer :
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);
});