kissy waterfall插件和php使用小例子

sunyke

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

• 
  
• 
  
• 
  
• demo
  
•   
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
•      
  
• 
  
•      
  
•          
  
•         Scroll to Top
  
•         Fetching pins…
  
•      
  
• 
  
• 
  
•      
  
•          
  
•             
  
•          
  
•         `title`
  
•      
  
• 
  
• 
  
• 
  
• 
  
• 
  

　　然后我们查看js文件（这个js文件是和php交互的重要文件demo2.js）：

• KISSY.use("waterfall,ajax,template,node", function(S, Waterfall, io, Template, Node) {
  
•     var $ = Node.all;
  
• 
  
•     var tpl = S.Template($('#tpl').html()),
  
•         nextpage = 1,
  
•         waterfall = new Waterfall.Loader({
  
•         container:"#ColumnContainer",
  
•         load:function(success, end) {
  
•             $('#loadingPins').show();
  
•             S.ajax({
  
•                 type: 'post',
  
•                 data:{
  
•                     'page': nextpage,
  
•                     'per_page': 20,
  
•                     'format': 'json'
  
•                 },
  
•                 url: 'post.php',
  
•                 dataType: "jsonp",
  
•                 jsonp: "jsoncallback",
  
•                 success: function(d) {
  
•                     // 如果数据错误, 则立即结束
  
•                     if (d.stat !== 'ok') {
  
•                         alert('load data error!');
  
•                         end();
  
•                         return;
  
•                     }
  
•                     // 如果到最后一页了, 也结束加载
  
•                     nextpage = d.photos.page + 1;
  
•                     if (nextpage > d.photos.pages) {
  
•                         end();
  
•                         return;
  
•                     }
  
•                     // 拼装每页数据
  
•                     var items = [];
  
•                     S.each(d.photos.photo, function(item) {
  
•                         item.height = Math.round(Math.random()*(300 - 180) + 180); // fake height
  
•                         items.push(new S.Node(tpl.render(item)));
  
•                     });
  
•                     success(items);
  
•                 },
  
•                 complete: function() {
  
•                     $('#loadingPins').hide();
  
•                 }
  
•             });
  
•         },
  
•         // align:'left', // center (default), right
  
•         minColCount:2,
  
•         colWidth:225
  
•     });
  
•     waterfall.on('adjustComplete', function() {
  
•         S.log('after adjust complete!');
  
•     });
  
•     waterfall.on('addComplete', function() {
  
•         S.log('after add complete!');
  
•     });
  
•     // scrollTo
  
•     $('#BackToTop').on('click', function(e) {
  
•         e.halt();
  
•         e.preventDefault();
  
•         $(window).stop();
  
•         $(window).animate({
  
•             scrollTop:0
  
•         },1,"easeOut");
  
•     });
  
• });
  

　　这里说明一下 url:post.php 这个post.php是指提交的action（废话，都能看懂），小小的汗一下！！
　　下面就是我们动态接收值了post.php文件：

• 
  

　　这个里面就没有什么好讲解的了！相信大家都能看懂！！好了，就说这么多吧！又不懂的直接回复，我肯定一一作答！
　　题外：jsonp 格式（可以去网上找一个小例子，一看就能懂）。


附件：http://down.运维网.com/data/2361195