jQuery-Wasserfall-Flow-Plug-in Wookmark-Verwendung example_jquery

Plug-in-Download: https://github.com/GBKS/Wookmark-jQuery Offizielle Homepage: http://www.wookmark.com/jquery-plugin

Nachdem Sie das Plug-in heruntergeladen haben, verweisen Sie auf die JS-Datei des Plug-ins auf der Webseite:

Kopieren Sie den Code Der Code lautet wie folgt: HTML-Codestruktur: Code kopieren Der Der Code lautet wie folgt: Einfache Verwendung: Code in HTML-Datei hinzufügen Code kopieren Der Code lautet wie folgt: jQuery(function($){ $(' #tiles li').wookmark(); }); Komplexe Verwendung: Code kopieren Der Code lautet wie folgt: jQuery(function($){ $('#tiles li').wookmark({ //Dies ist das Objekt zum Implementieren des Wasserfall-Flow-Layouts autoResize: true, //Auf true setzen, um anzugeben, dass das Layout neu gestaltet wird, wenn sich die Fenstergröße ändert Container: $('#container' ), //Dies ist der Name des Containers. Dieser Container muss ein CSS-Attribut „position:relative“ enthalten, sonst sehen Sie, dass alles in die obere linke Ecke der Seite gequetscht wird offset: 12, // Der Abstand zwischen zwei benachbarten Elementen itemWidth: 222, //Die Breite des angegebenen Objekts resizeDelay: 50 / /Dies ist der Verzögerungseffekt }); }) ; wookmark kann auch mit Ajax verwendet werden, um Daten dynamisch zu laden, aber neu Es muss später erneut ausgeführt werden. Code kopieren Der Code lautet wie folgt: var handler = $('#tiles li'); handler.wookmark(options); Wenn Sie das Ereignis zuvor gebunden haben, löschen Sie es, bevor Sie es erneut ausführen. Code kopieren Der Code lautet wie folgt: handler.wookmarkClear(); Vergleich ansehen Viele Leute fragen, wie man das rollierende Laden verwendet. Hier ist ein Beispiel zur Erklärung: Kopieren Sie den Code Der Code ist wie folgt folgt: var handler = null; //Grundlegende Attribute definieren. var options = { autoResize: true, container: $('#main'), offset: 2 , itemWidth: 210 };

//Definieren Sie die Scroll-Funktion function onScroll(event) { //Ob es den Boden erreicht hat (hier wird beurteilt, ob es ist 100 Pixel vom unteren Rand entfernt) Daten werden geladen. var closeToBottom = ($(window).scrollTop() $(window).height() > $(document).height() - 100); if(closeToBottom) { //Hier sind die von AJAX geladenen Daten $.ajax({url:"data.html", dataType:"html", success:function(html){ //Neue Daten an das Objekt anhängen $ ('#Waterfall'); // Die ursprüngliche Positionierung löschen if (handler) handler.wookmarkClear (); // Ein neues Wookmark-Objekt erstellen handler = $('#waterfall li'); handler.wookmark(options); 🎜> $(document).ready(new function() { // Scroll-Ereignis binden. $(document).bind('scroll', onScroll); //Erstes Layout. handler = $('#waterfall li'); handler.wookmark( Optionen); });