kissy waterfall插件和php使用小例子

 最近工作比较忙,没有时间写博文! 这段时间网站需要使用瀑布流,从网上搜索了一堆,全是一样的博文!哎,同一个博主的文章来回的复制粘贴看的我都郁闷了!有很多人推荐使用kissy waterfall 这个插件!所以主要是讲解一下kissy waterfall和动态调用怎么结合起来(高手请绕道,因为一看就能明白,主要是写给新手的!!)。 别的不多说,直接上代码(本例子使用kissy waterfall + PHP),可以直接去附件里面下载小例子,放到PHP的环境下都能运行:

首先创建html文件(demo.html):

  
  
  
  
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>demo</title> 
  5.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  6. <link rel="stylesheet" href="demo.css" type="text/css" media="all"/> 
  7.  
  8. <script src="kissy.js"></script> 
  9. <script src="base.js"></script> 
  10. <script src="loader.js"></script> 
  11. <script src="waterfall.js"></script> 
  12. </head> 
  13.  
  14. <body> 
  15.  
  16. <div id="wrapper"> 
  17.     <div id="button_container"></div> 
  18.  
  19.     <div id="article"> 
  20.         <div id="ColumnContainer"> </div> 
  21.         <a id="BackToTop" href="#">Scroll to Top</a> 
  22.         <div id="loadingPins"><img src="http://d3io1k5o0zdpqr.cloudfront.net/images/BouncingLoader.gif" alt="Pin Loader Image"/><span>Fetching pins&hellip;</span></div> 
  23.     </div> 
  24. </div> 
  25. <script type="tpl" id="tpl"> 
  26.     <div class="pin ks-waterfall" data-id="{{id}}"> 
  27.         <a href="#" class="image"> 
  28.             <img height="{{height}}" alt="{{title}}" src="http://farm{{farm}}.static.flickr.com/{{server}}/{{id}}_{{secret}}_m.jpg" /> 
  29.         </a> 
  30.         <p class="description">{{title}}</p> 
  31.     </div> 
  32. </script> 
  33. <script src="demo2.js"></script> 
  34.  
  35. </body> 
  36. </html> 

然后我们查看js文件(这个js文件是和php交互的重要文件demo2.js):

  
  
  
  
  1. KISSY.use("waterfall,ajax,template,node"function(S, Waterfall, io, Template, Node) { 
  2.     var $ = Node.all; 
  3.  
  4.     var tpl = S.Template($('#tpl').html()), 
  5.         nextpage = 1, 
  6.         waterfall = new Waterfall.Loader({ 
  7.         container:"#ColumnContainer"
  8.         load:function(success, end) { 
  9.             $('#loadingPins').show(); 
  10.             S.ajax({ 
  11.                 type: 'post'
  12.                 data:{ 
  13.                     'page': nextpage, 
  14.                     'per_page': 20, 
  15.                     'format''json' 
  16.                 }, 
  17.                 url: 'post.php'
  18.                 dataType: "jsonp"
  19.                 jsonp: "jsoncallback"
  20.                 success: function(d) { 
  21.                     // 如果数据错误, 则立即结束 
  22.                     if (d.stat !== 'ok') { 
  23.                         alert('load data error!'); 
  24.                         end(); 
  25.                         return
  26.                     } 
  27.                     // 如果到最后一页了, 也结束加载 
  28.                     nextpage = d.photos.page + 1; 
  29.                     if (nextpage > d.photos.pages) { 
  30.                         end(); 
  31.                         return
  32.                     } 
  33.                     // 拼装每页数据 
  34.                     var items = []; 
  35.                     S.each(d.photos.photo, function(item) { 
  36.                         item.height = Math.round(Math.random()*(300 - 180) + 180); // fake height 
  37.                         items.push(new S.Node(tpl.render(item))); 
  38.                     }); 
  39.                     success(items); 
  40.                 }, 
  41.                 complete: function() { 
  42.                     $('#loadingPins').hide(); 
  43.                 } 
  44.             }); 
  45.         }, 
  46.         // align:'left', // center (default), right 
  47.         minColCount:2, 
  48.         colWidth:225 
  49.     }); 
  50.     waterfall.on('adjustComplete'function() { 
  51.         S.log('after adjust complete!'); 
  52.     }); 
  53.     waterfall.on('addComplete'function() { 
  54.         S.log('after add complete!'); 
  55.     }); 
  56.     // scrollTo 
  57.     $('#BackToTop').on('click'function(e) { 
  58.         e.halt(); 
  59.         e.preventDefault(); 
  60.         $(window).stop(); 
  61.         $(window).animate({ 
  62.             scrollTop:0 
  63.         },1,"easeOut"); 
  64.     }); 
  65. }); 

这里说明一下 url:post.php 这个post.php是指提交的action(废话,都能看懂),小小的汗一下!!

下面就是我们动态接收值了post.php文件:

  
  
  
  
  1. <?php 
  2.     $callback=isset($_REQUEST['jsoncallback'])?trim($_REQUEST['jsoncallback']):''
  3.     $page_count = $_REQUEST['per_page'];  //显示的条数 
  4.     $page  = $_REQUEST['page']; //显示第几页 
  5.      
  6.     echo $callback.'({"photos":{"page":2, "pages":62877, "perpage":20, "total":"1257521", "photo":[{"id":"6849293233", "owner":"57117553@N08", "secret":"f7178fa300", "server":"7174", "farm":8, "title":"RoseCityClassicDogShow-59", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849293909", "owner":"57117553@N08", "secret":"8e58affa19", "server":"7015", "farm":8, "title":"RoseCityClassicDogShow-61", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849286251", "owner":"57117553@N08", "secret":"1ced22d740", "server":"7041", "farm":8, "title":"RoseCityClassicDogShow-34", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849276543", "owner":"57117553@N08", "secret":"b8e58caa73", "server":"7002", "farm":8, "title":"RoseCityClassicDogShow-7", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849290171", "owner":"57117553@N08", "secret":"f346758302", "server":"7197", "farm":8, "title":"RoseCityClassicDogShow-48", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849279815", "owner":"57117553@N08", "secret":"1616b3c3c8", "server":"7189", "farm":8, "title":"RoseCityClassicDogShow-17", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849276969", "owner":"57117553@N08", "secret":"4d168ae1c9", "server":"7173", "farm":8, "title":"RoseCityClassicDogShow-8", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849288399", "owner":"57117553@N08", "secret":"291c6a69cd", "server":"7041", "farm":8, "title":"RoseCityClassicDogShow-40", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849277955", "owner":"57117553@N08", "secret":"92d0f97bcc", "server":"7157", "farm":8, "title":"RoseCityClassicDogShow-11", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849292607", "owner":"57117553@N08", "secret":"c648ff140e", "server":"7171", "farm":8, "title":"RoseCityClassicDogShow-57", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849291099", "owner":"57117553@N08", "secret":"fdb84073a3", "server":"7032", "farm":8, "title":"RoseCityClassicDogShow-52", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849200725", "owner":"66123622@N05", "secret":"f64fcc728f", "server":"7052", "farm":8, "title":"213058", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849221181", "owner":"44747875@N07", "secret":"437414415d", "server":"7025", "farm":8, "title":"Photo 361\/365 - La Vie En Rouge, Chantelle Ivy", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849208117", "owner":"26016495@N02", "secret":"95940d1afa", "server":"7014", "farm":8, "title":"Meus testes continuam", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849185165", "owner":"66914897@N02", "secret":"6dbb291d7b", "server":"7172", "farm":8, "title":"TodaysYellow", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849184671", "owner":"37404283@N02", "secret":"3ff6cf40cc", "server":"7070", "farm":8, "title":"Pink Rose Cupcake Sign", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849115965", "owner":"71597918@N04", "secret":"30c503d5a2", "server":"7159", "farm":8, "title":"\"Le Grand March\u00e9 de la Gastronomie\"", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849111855", "owner":"38081423@N08", "secret":"48fe7e4250", "server":"7055", "farm":8, "title":"1950s rose print blouse, by Shapely Classic", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849058247", "owner":"26583026@N07", "secret":"bee2e61595", "server":"7153", "farm":8, "title":"L\'Amore Nero", "ispublic":1, "isfriend":0, "isfamily":0}, {"id":"6849071711", "owner":"74409264@N00", "secret":"b76087ec2a", "server":"7193", "farm":8, "title":"Pink Rose", "ispublic":1, "isfriend":0, "isfamily":0}]}, "stat":"ok"})'
  7. ?> 

这个里面就没有什么好讲解的了!相信大家都能看懂!!好了,就说这么多吧!又不懂的直接回复,我肯定一一作答!

题外:jsonp 格式(可以去网上找一个小例子,一看就能懂)。

你可能感兴趣的:(瀑布流,waterfall,kissy,动态瀑布流,php瀑布流例子,waterfall瀑布流)