JQuery Waterfall Plugin usage-waterfall stream picture Display

A recent project needs to use jquery Waterfall plugin-Waterfall stream picture Display

jquery Waterfall Plugin,like Pinterest, huaban.com, faxianla.com

: Waterfall Plugin

How to use

The first step:

Add HTML code

<div id= "container"></div>

Step Two:

Introduce the required JS

<script src="/path/jquery.min.js"></script><script src="/path/handlebars.js"></script><script src="/path/waterfall.min.js"></script>

Step Three:

Add a template

<script id="Waterfall-tpl" type="Text/x-handlebars-template">   //template content</script>

Fourth Step:

The script is implemented as follows:

$(' #container '). Waterfall ({  ITEMCLS:' Waterfall-item ',  Prefix' Waterfall ',  Fitwidth:true,  Colwidth: -,  Gutterwidth:Ten,  Gutterheight:Ten,  Align' Center ',  Mincol:1,  Maxcol:undefined,  Maxpage:undefined,  Bufferpixel:- -,  Containerstyle: {    Position' relative '  },  Resizable:true,  Isfadein:false,  IsAnimated:false,  Animationoptions: {  },  Isautoprefill:true,  Checkimagesloaded:true,  Path:undefined,  DataType:' JSON ',  Params: {},    Loadingmsg:' <div style= ' text-align:center;padding:10px 0; color: #999; " ><br /> Loading...</div> ',    State: {    Isduringajax:false,    Isprocessingdata:false,    Isresizing:false,    Curpage:1   },  //Callbacks  Callbacks: {            /* * Loadingstart * @param {Object} loading $ (' #          Waterfall-loading ')        * /    Loadingstart:function ($loading) {      $loading. Show ();      //console.log (' Loading ', ' start ');    },        /* *        loadingfinished * @param {Object} loading $ (' #waterfall-loading          ')        * @param {Boolean} isbeyondmaxpage         */    Loadingfinished:function ($loading, Isbeyondmaxpage) {      if(!isbeyondmaxpage) {        $loading. FadeOut ();        //console.log (' loading finished ');      }Else{        //console.log (' Loading isbeyondmaxpage ');        $loading. remove ();      }    },        /*     *        loadingerror * @param {String} xhr, "End" "Error  " 
       c7> * *      Loadingerror:function ($message, XHR) {      $message. HTML (' Data load faild, please try again later. ');    },                            /* * RenderData * @param {String} data * @param     {String} dataType, "JSON", "JSONP", "html"        * /    RenderData: function (data, DataType) {      varTpl        Template              if(DataType = = =' JSON '|| DataType = = =' Jsonp ') {//JSON or JSONP format        TPL = $ (' #waterfall-tpl '). HTML ();        Template = Handlebars.compile (TPL);                returnTemplate (data);      }Else{//HTML format        returnData      }    }  },    Debugfalse});

Fifth Step:

Set the service that invokes the data

Sixth step:

Demo examples are as follows:

Infinitescroll

Original: http://blog.csdn.net/websites/article/details/45094407

Thank you for your attention websites blog!

JQuery Waterfall Plugin usage-waterfall stream picture Display