您的位置：首页 > 运维架构 > 网站架构

网站注入数据判断

2014-05-19 10:18 127 查看

最近工作比较忙，没有时间写博文！这段时间网站需要使用瀑布流，从网上搜索了一堆，全是一样的博文！哎，同一个博主的文章来回的复制粘贴看的我都郁闷了！有很多人推荐使用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 格式（可以去网上找一个小例子，一看就能懂）。
本文出自 “成长记录” 博客，请务必保留此出处http://jsny821.blog.51cto.com/4736911/958276

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航