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

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.