jQuery waterfall flow plug-in Wookmark usage example_jquery

Plug-in download: https://github.com/GBKS/Wookmark-jQuery Official 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: HTML code structure: Copy code The code is as follows: Simple usage: add code in html file Copy code The code is as follows: jQuery(function($){ $('#tiles li').wookmark(); }); Complex usage: Copy code The code is as follows: jQuery(function($){ $('#tiles li').wookmark({ //This is the object to implement waterfall flow layout autoResize: true, //Set to true to indicate that when the window size changes, the layout will be re-layout 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 offset: 12, //The distance between two adjacent elements itemWidth: 222, //The width of the specified object resizeDelay: 50 / /This is the delay effect. The default is 50 }); }); 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); });