Wookmark-jquery-master Waterfall Stream Plug-in usage introduction, including personal test demo

Requirements

• Essential knowledge

  This article requires a basic understanding of html/css, Javascript/jquery.

• Development environment

  Dreamweaver Cs6/chrome Browser

• Demo Address

  Demo Address data download

Test Preview (Lift your mouse to see the demo address OH):

Program Core code look here:

$(function(){            functionShow () {varcolors=["#BA4A3A", "#5BB5D6", "#8EA83B", "#EE5C92", "#8AC9B5", "#604127", "#E8A03B", "#AF032D", "#000000", "#506575"]; vartags=["Woman", "Man", "movie", "Po Son", "Anne Hathaway", "digital"];  for(varIinchcolors) {                    varindex = Math.Round (Math.random () * 59); varImg= ". /public/pic/test/"+index+". jpg "; varIndex2=math.round (Math.random () * (tags.length-1));//randomly get a label                                    $(' #tiles '). Append ("<li style= ' background:" +colors[i]+ "' class= ' clearfix ' ><div style= ' background: #FFF ' > </div><p> is a bear!! Not a game console!! </p><span># "+tags[index2]+" </span></li> "); }                }                 //Initialize 20 of dataShow ();                    Show (); /*Waterfall Flow*/    $(' #tiles '). imagesloaded (function() {        varHandler =NULL; //Prepare layout options.        varOptions ={autoresize:true,//This would auto-update the layout when the browser window is resized.Container: $ (' #main '),//Optional, used for some extra CSS stylingOffset:15,//Optional, the distance between grid itemsitemwidth:230,//Optional, the width of a grid itemDirection: ' Right '        }; //Waterfall Flow Layout        functionApplylayout () {$ (' #tiles '). imagesloaded (function() {            //Destroy the old handler//Whether you need to destroy the older layout            if(handler.wookmarkinstance) {handler.wookmarkInstance.clear (); }            //Create a new layout handler.//Rearrange Waterfall flowHandler = $ (' #tiles Li ');    Handler.wookmark (options); //Incoming configuration Parameters          }); }          //when the scrollbar height is greater than or equal to the last box height Ajax request Data          //bind to the scroll event                 functionOnscroll (event) {//Check If we ' re within pixels of the bottom edge of the Broser window.          varWinheight = Window.innerheight? Window.innerheight: $ (window). Height ();//iphone Fix          varClosetobottom = ($ (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 ');//Get the boxHandler.wookmark (options);//Initialize Waterfall stream      }); });

Wookmark-jquery Waterfall Stream Plugin Introduction and download:http://www.wookmark.com/jquery-plugin/

Official online demo Address: http://www.wookmark.com/

About the dynamic upload pictures will be introduced in the following articles, interested Bo friends can pay more attention to Oh!!

"Hehe" ended, please forgive the children's shoes at present "brain remnants and lack of" language organization ability, welcome to make bricks to hack axe, because I level limited, the article in the expression and code aspects if there is inappropriate, welcome criticism correct.

If the above articles or links are helpful to you, don't forget to click the "OK" button at the end of the article or click the "like a " button in the bottom right corner of the page. You can also click on the right side of the page " share " hover button Oh, let more people read this article.

Author: Li-cheng Source: http://www.cnblogs.com/Li-Cheng/p/3807592.htmldue to my limited level, the article in terms of presentation and code if there is something wrong, welcome criticism. Leave your footprints, welcome to comment Oh. You can also pay attention to me, study together Oh!