Examples of using jQuery waterfall stream plug-in Wookmark

Plug-in download: https://github.com/GBKS/Wookmark-jQuery
Official homepage: http://www.wookmark.com/jquery-plugin

After downloading the plug-in, reference the plug-in JS file on the webpage:
Copy codeThe Code is as follows:
<Script src = "jquery-1.8.2.min.js"> </script>
<Script src = "jquery. wookmark. min. js"> </script>
HTML code structure:
Copy codeThe Code is as follows: <div id = "main">
<Ul id = "tiles">
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Div>
Simple usage: Add code to an html file
Copy codeThe Code is as follows: <script>
JQuery (function ($ ){
$ ('# Tiles li'). wookmark ();
});
</Script>
Complex usage:
Copy codeThe Code is as follows: <script>
JQuery (function ($ ){
$ ('# Tiles li'). wookmark ({// here is the object to implement waterfall flow Layout
AutoResize: true, // if it is set to true, it indicates that when the window size changes, the layout is re-laid.
Container: $ ('# iner'), // This is the container name. This container must contain a css attribute "position: relative "otherwise you will see all crowded in the upper left corner of the page
Offset: 12, // the spacing between two adjacent elements
ItemWidth: 222, // specify the object width
ResizeDelay: 50 // The default latency is 50.
});
});
</Script>
Wookmark can also be used with ajax to dynamically load data, but it needs to be re-executed after being added.
Copy codeThe Code is as follows: var handler = $ ('# tiles li ');
Handler. wookmark (options );
If you have already bound events, clear them before re-execution.
Copy codeThe Code is as follows: handler. wookmarkClear ();
You can see that many people are asking how to use the rolling load function. Add an example:
Copy codeThe Code is as follows: var handler = null;
// Define basic attributes.
Var options = {
AutoResize: true,
Container: $ ('# main '),
Offset: 2,
ItemWidth: 210
};

// Define the rolling function
Function onScroll (event ){
// Determine whether to load data to the bottom (this is to judge that there is a 100px file starting to load data from the bottom ).
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 location
If (handler) handler. wookmarkClear ();
// Create a new wookmark object
Handler = $ ('# waterfall li ');
Handler. wookmark (options );
}
});
}
};

$ (Document). ready (new function (){
// Bind the scroll event.
$ (Document). bind ('scroll ', onScroll );
// Layout for the first time.
Handler = $ ('# waterfall li ');
Handler. wookmark (options );
});