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&hellip;</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 格式（可以去網上找一個小例子，一看就能懂）。

kissy waterfall插件和php使用小例子

thinkphp如何跨模塊調用方法呢？

windows下apache配置虛擬機

linux（ubuntu）設置root默認密碼

用正則替換文章中的表情（例如微博）

微信開發教程（1）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結