Plug-in-Download: https://github.com/GBKS/Wookmark-jQueryOffizielle 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: </script> ;</div><BR>HTML-Codestruktur: <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="3275" class="copybut" id="copybut3275" onclick="doCopy('code3275')"><U>Code kopieren</U></a></span> Der Der Code lautet wie folgt:</div><div class="codebody" id="code3275"><div id ="main"><br> <ul id="tiles"><br> <li><img src="images/1 .jpg"></li><br> < li><img src="images/2.jpg"></li><br> <li><img src="images /3.jpg"></li><br> </ul><br></div></div> <br>Einfache Verwendung: Code in HTML-Datei hinzufügen<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="81248" class="copybut" id="copybut81248" onclick="doCopy('code81248')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code81248"><script><br> jQuery(function($){<br> $(' #tiles li').wookmark();<br> });<br> Komplexe Verwendung: Code kopieren Der Code lautet wie folgt: <br>jQuery(function($){<br> $('#tiles li').wookmark({ //Dies ist das Objekt zum Implementieren des Wasserfall-Flow-Layouts<br> autoResize: true, //Auf true setzen, um anzugeben, dass das Layout neu gestaltet wird, wenn sich die Fenstergröße ändert <br> 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 <br> offset: 12, // Der Abstand zwischen zwei benachbarten Elementen <br> itemWidth: 222, //Die Breite des angegebenen Objekts <br> resizeDelay: 50 / /Dies ist der Verzögerungseffekt <br> });<br>}) ;<br> 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);});
