Plug-in download: https://github.com/GBKS/Wookmark-jQueryOfficial homepage: http://www.wookmark.com/jquery-plugin After downloading the plug-in, reference the JS file of the plug-in in the web page: Copy the code The code is as follows: </script> ;</div><BR>HTML code structure: <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="3275" class="copybut" id="copybut3275" onclick="doCopy('code3275')"><U>Copy code</U></a></span> The code is as follows:</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>Simple usage: add code in html file<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="81248" class="copybut" id="copybut81248" onclick="doCopy('code81248')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code81248"><script><br> jQuery(function($){<br> $('#tiles li').wookmark();<br> });<br> Complex usage: Copy code The code is as follows: <br>jQuery(function($){<br> $('#tiles li').wookmark({ //This is the object to implement waterfall flow layout<br> autoResize: true, //Set to true to indicate that when the window size changes, the layout will be re-layout <br> container: $('#container'), //This is the name of the container. This container must contain a css attribute "position:relative" otherwise you You will see that everything is squeezed into the upper left corner of the page <br> offset: 12, //The distance between two adjacent elements <br> itemWidth: 222, //The width of the specified object <br> resizeDelay: 50 / /This is the delay effect. The default is 50<br> });<br>});<br> wookmark can also be used with ajax to dynamically load data, but new It needs to be executed again later. Copy code The code is as follows: var handler = $('#tiles li'); handler.wookmark(options); If you have bound the event before, clear it before re-executing it. Copy code The code is as follows: handler.wookmarkClear(); See comparison Many people are asking how to use rolling loading. Here is an example to explain: Copy the code The code is as follows: var handler = null;//Define basic attributes.var options = { autoResize: true, container: $('#main'), offset: 2 , itemWidth: 210};//Define the scroll function function onScroll(event) { //Whether it has reached the bottom (here is to judge whether it is 100px away from the bottom) Loading data). var closeToBottom = ($(window).scrollTop() $(window).height() > $(document).height() - 100); if(closeToBottom) { //Here is the data loaded by AJAX $.ajax({url:"data.html", dataType:"html", success:function(html){ //Append new data To the object $ ('#Waterfall'). Append (html); // Clear the original positioning if (handler) handler.wookmarkClear (); // Create a new Wookmark Object handler = $('#waterfall li'); handler.wookmark(options); 🎜> $(document).ready(new function() { //Bind scroll event. $(document).bind('scroll', onScroll); //First layout. handler = $('#waterfall li'); handler.wookmark(options);});
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
