Introduction to Wookmark-jQuery-master waterfall stream plug-in, including personal test DEMO

Requirements

• Required knowledge

  This article requires a basic understanding of Html/CSS, JavaScript/JQuery.

• Development Environment

  Dreamweaver CS6/Chrome browser

• Demo address

  Demo address material download

 

 

Test Preview (move your mouse up to view the demo address ):

$ (Function () {function show () {var colors = ["# BA4A3A", "#5BB5D6", "# 8EA83B", "# EE5C92", "#8AC9B5 ", "#604127", "# E8A03B", "# AF032D", "#000000", "#506575"]; var tags = ["woman", "man ", "Movie", "baoer", "Anne Hathaway", "digital"]; for (var I in colors) {var index = Math. round (Math. random () * 59); var img = ".. /Public/Pic/test/"+ index + ". jpg "; var index2 = Math. round (Math. random () * (tags. length-1); // obtain a tag at random $ ('# tiles '). append ("<li style = 'BA Ckground: "+ colors [I] +" 'class = 'clearfix'> <div style = 'background: # fff'> </div> <p> is a bear !! Not a game host !! </P> <span> # "+ tags [index2] +" </span> </li> ") ;}// initialize 20 pieces of data show (); show ();/* waterfall stream */$ ('# tiles '). imagesLoaded (function () {var handler = null; // Prepare layout options. var options = {autoResize: true, // This will auto-update the layout when the browser window is resized. container: $ ('# main'), // Optional, used for some extra CSS styling offset: 15, // Optional, the distance between grid items it EmWidth: 230, // Optional, the width of a grid item ction: 'right'}; // waterfall flow layout function applyLayout () {$ ('# tiles '). imagesLoaded (function () {// Destroy the old handler // whether to Destroy the old layout if (handler. wookmarkInstance) {handler. wookmarkInstance. clear ();} // Create a new layout handler. // re-layout the waterfall stream handler =$ ('# tiles li'); handler. wookmark (options); // input configuration parameter});} // when the height of the scroll bar is greater than or equal to the height of the last box Ajax request data // bind to SC On the roll event, function onScroll (event) {// Check if we're re within 100 pixels of the bottom edge of the broser window. var winHeight = window. innerHeight? Window. innerHeight: $ (window ). height (); // iphone fix var closeToBottom = ($ (window ). scrollTop () + winHeight> $ (document ). height ()-100); if (closeToBottom) {show (); applyLayout (); // execution layout }}; // Capture scroll event. $ (window ). bind ('scroll ', onScroll); // Call the layout function. handler = $ ('# tiles li'); // obtain the box handler. wookmark (options); // initialize the waterfall stream });});

Wookmark-jQuery waterfall stream plug-in introduction and download: http://www.wookmark.com/jquery-plugin/

Official Online Demo address: http://www.wookmark.com/

"Not bad" button or click "like" in the lower right corner of the page. You can also click the "share" floating button on the right side of the page to let more people read this article.

 

Author: Li-Cheng Source: Chen. Leave your footprints. Comments are welcome. You can also follow me and learn together!