JQuery waterfall plugin Wookmark USES the example

  • 2020-03-30 02:32:04
  • OfStack

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>

Simple usage: add code to an HTML file
  $('#tiles li').wookmark();

More complicated usage:
 $('#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

Wookmark can also be used with ajax to dynamically load data, but it needs to be reexecuted after the addition.
var handler = $('#tiles li');

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

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
            //Clear the original location
            if(handler) handler.wookmarkClear();
            //Create a new wookmark object
            handler = $('#waterfall li');

$(document).ready(new function() {
    //Bind the scroll event.
    $(document).bind('scroll', onScroll);
    //First layout.
    handler = $('#waterfall li');

Related articles: