kissy waterfall插件和php使用小例子
最近工作比较忙，没有时间写博文！ 这段时间网站需要使用瀑布流，从网上搜索了一堆，全是一样的博文！哎，同一个博主的文章来回的复制粘贴看的我都郁闷了！有很多人推荐使用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
页:
[1]