天天看點
傳回

kissy waterfall插件和php使用小例子

 最近工作比較忙，沒有時間寫博文！ 這段時間網站需要使用瀑布流，從網上搜尋了一堆，全是一樣的博文！哎，同一個部落客的文章來回的複制粘貼看的我都郁悶了！有很多人推薦使用kissy waterfall 這個插件！是以主要是講解一下kissy waterfall和動态調用怎麼結合起來（高手請繞道，因為一看就能明白，主要是寫給新手的！！）。 别的不多說，直接上代碼（本例子使用kissy waterfall + PHP），可以直接去附件裡面下載下傳小例子，放到PHP的環境下都能運作:

首先建立html檔案（demo.html）：

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

然後我們檢視js檔案（這個js檔案是和php互動的重要檔案demo2.js）：

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

這裡說明一下 url:post.php 這個post.php是指送出的action（廢話，都能看懂），小小的汗一下！！

     
  1.  <?php        
    2.       
  2.      $callback=isset($_REQUEST['jsoncallback'])?trim($_REQUEST['jsoncallback']):'';        
    3.       
  3.      $page_count = $_REQUEST['per_page'];  //顯示的條數        
    4.       
  4.      $page  = $_REQUEST['page']; //顯示第幾頁        
    5.           
  5.      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"})';        
    6.       
  6.  ?>        
    7.
kissy waterfall 瀑布流 php瀑布流例子 waterfall瀑布流 動态瀑布流
上一篇: 逗号操作符
下一篇: Hive性能優化（全面）

繼續閱讀