kissy waterfall插件和php使用小例子
最近工作比较忙，没有时间写博文！ 这段时间网站需要使用瀑布流，从网上搜索了一堆，全是一样的博文！哎，同一个博主的文章来回的复制粘贴看的我都郁闷了！有很多人推荐使用kissy waterfall 这个插件！所以主要是讲解一下kissy waterfall和动态调用怎么结合起来（高手请绕道，因为一看就能明白，主要是写给新手的！！）。 别的不多说，直接上代码（本例子使用kissy waterfall + PHP），可以直接去附件里面下载小例子，放到PHP的环境下都能运行:
首先创建html文件（demo.html）：
- <!DOCTYPE html>
- <html>
- <head>
- <title>demo</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <link rel="stylesheet" href="demo.css" type="text/css" media="all"/>
- <script src="kissy.js"></script>
- <script src="base.js"></script>
- <script src="loader.js"></script>
- <script src="waterfall.js"></script>
- </head>
- <body>
- <div id="wrapper">
- <div id="button_container"></div>
- <div id="article">
- <div id="ColumnContainer"> </div>
- <a id="BackToTop" href="#">Scroll to Top</a>
- <div id="loadingPins"><img src="http://d3io1k5o0zdpqr.cloudfront.net/images/BouncingLoader.gif" alt="Pin Loader Image"/><span>Fetching pins…</span></div>
- </div>
- </div>
- <script type="tpl" id="tpl">
- <div class="pin ks-waterfall" data-id="{{id}}">
- <a href="#" class="image">
- <img height="{{height}}" alt="{{title}}" src="http://farm{{farm}}.static.flickr.com/{{server}}/{{id}}_{{secret}}_m.jpg" />
- </a>
- <p class="description">{{title}}</p>
- </div>
- </script>
- <script src="demo2.js"></script>
- </body>
- </html>
然后我们查看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文件：
- <?php
- $callback=isset($_REQUEST['jsoncallback'])?trim($_REQUEST['jsoncallback']):'';
- $page_count = $_REQUEST['per_page']; //显示的条数
- $page = $_REQUEST['page']; //显示第几页
- 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"})';
- ?>
这个里面就没有什么好讲解的了！相信大家都能看懂！！好了，就说这么多吧！又不懂的直接回复，我肯定一一作答！
题外：jsonp 格式（可以去网上找一个小例子，一看就能懂）。