JQuery waterfall plugin Wookmark USES the example

Plug-in download: https://github.com/GBKS/Wookmark-jQuery
The official home page: http://www.wookmark.com/jquery-plugin

After downloading the plug-in, refer to the JS file of the plug-in in the web page:

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.wookmark.min.js"></script>

HTML code structure:

<div id="main">
 <ul id="tiles">
  <li><img src="images/1.jpg"></li>
  <li><img src="images/2.jpg"></li>
  <li><img src="images/3.jpg"></li>
 </ul>
</div>

Simple usage: add code to an HTML file

<script>
 jQuery(function($){
  $('#tiles li').wookmark();
 });
</script>

More complicated usage:

<script>
jQuery(function($){
 $('#tiles li').wookmark({ //Here is the object to implement the waterfall flow layout
  autoResize: true, //Setting this to true means that when the window size changes, the layout is rearranged
  container: $('#container'), //This is the name of the container and the container has to have a CSS property called "position:relative" otherwise you'll see that it's all in the top left corner of the page
  offset: 12, //The spacing between two adjacent elements
  itemWidth: 222, //Specifies the width of the object
  resizeDelay: 50 //This is the delay and the default is 50
 });
});
</script>

Wookmark can also be used with ajax to dynamically load data, but it needs to be reexecuted after the addition.

var handler = $('#tiles li');
handler.wookmark(options);

If you've already bound an event before, clear it before reexecuting.

handler.wookmarkClear();

See a lot of people are asking how to use the scroll load, make an example to supplement the explanation:

var handler = null;
//Define the basic properties.
var options = {
    autoResize: true,
    container: $('#main'),
    offset: 2,
    itemWidth: 210
};

//Define the scroll function
function onScroll(event) {
    //Whether to the bottom (here is to determine that there are still 100px to the bottom to start 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 the 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);
    //First layout.
    handler = $('#waterfall li');
    handler.wookmark(options);
});