现在越来越多的网站开始瀑布流方式布局，瀑布流式布局(百度百科:瀑布流)，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。应该说以图片展示为主的网页会使用这种方式，便于浏览，而且最主要的是减轻服务器压力，加快页面加载速度。在网页显示前，只查询一点点的数据，基本能铺满一个屏幕即可，然后使用ajax再次进行数据查询。
不过相应的，瀑布流也是有它的缺点的：用户向下滚动出现较多内容后，无法记忆之前出现的商品的位置（传统的，我们可以记住它在哪一页，减轻了重新搜索商品的压力）；我们要考虑实现这种功能的JS脚本的复杂度和浏览器兼容性；还有就是页脚，当用户想要滚动要底部使用页脚时，程序却又加载新的内容再次将页脚隐藏了；最重要的是，不利于SEO。
我在实现瀑布流的过程中，有网友推荐说kissy框架能够很快地实现该功能，而且曾经也就想学习kissy框架了，那就通过这个功能学习一下吧。
官方地址：http://docs.kissyui.com/1.3/docs/html/api/component/waterfall/
你可以一直滚动鼠标，会发现当滚动条滚动到底部的时候数据就会加载。最终会加载8页的数据，然后停止加载。
如果我们仅仅是想要格式化一下已经加载的数据，而不动态加载数据的话，就简单了。
html代码：
<head> <meta charset="UTF-8"/> <title>kissy_waterfall</title> <style type="text/css"> .container{position:relative; width:1081px; margin:0 auto;} .ks-waterfall{ position:absolute; width:232px; overflow:hidden; padding:15px; border:2px solid #DDD; margin-bottom:20px; text-align:center; left:-9999px; top:-9999px; } </style> </head> <body> <div id="container" class="container"> <div class="ks-waterfall"> <img src="images/nv0.jpg" alt="" /> <div class="title">hierarch</div> </div> <div class="ks-waterfall"> <img src="images/nv1.jpg" alt="" /> <div class="title">hierarch</div> </div> <div class="ks-waterfall"> <img src="images/nv2.jpg" alt="" /> <div class="title">hierarch</div> </div> <div class="ks-waterfall"> <img src="images/nv3.jpg" alt="" /> <div class="title">hierarch</div> </div> <div class="ks-waterfall"> <img src="images/nv4.jpg" alt="" /> <div class="title">hierarch</div> </div> <div class="ks-waterfall"> <img src="images/nv5.jpg" alt="" /> <div class="title">hierarch</div> </div> <div class="ks-waterfall"> <img src="images/nv6.jpg" alt="" /> <div class="title">hierarch</div> </div> <div class="ks-waterfall"> <img src="images/nv7.jpg" alt="" /> <div class="title">hierarch</div> </div> </div> </body>
然后加载两个kissy文件和一个jQuery文件：
<script type="text/javascript" src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script> <script type="text/javascript" src="http://a.tbcdn.cn/s/kissy/1.3.0/seed-min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
使用脚本生成瀑布：
KISSY.use("waterfall", function (S, Waterfall) {
new Waterfall({
container: "#container", //节点容器
minColCount: 2, //最小列数
colWidth: 270 //每列的宽度
});
});
如果我们还需要动态的加载数据，可能就要麻烦一点。html文件与加载的3个库文件不动，这里我们需要添加一个模板，就是当我们添加数据时，应该以怎样的样式显示出来。
模板是这样写的：
<script type="tpl" id="tpl"> <div class="ks-waterfall"> <img src="{path}" alt="" style="height:{height}px"/> <div class="title">hierarch</div> </div> </script>
script标签包含的内容就是要加载数据的模板，这里我依然用上面图片使用的模板，保持一致性嘛！
这个标签我们最好放在引用库文件的链接的后面，然后是KISSY使用的js代码。
这里再次使用KISSY生成瀑布流时的代码就比较长了：
KISSY.use('waterfall, ajax, node, button', function(S, Waterfall, IO, Node, Button){
var tpl = ($('#tpl').html()),
nextpage = 1,
waterfall = new Waterfall.Loader({
container: "#container",
minColCount: 2,
colWidth: 270,
load:function(success, end){
new IO({
data:{
'page': nextpage,
'per_page': 10,
'format': 'json'
},
url: 'test.php',
dataType: 'json',
success:function(d){
nextpage = parseInt(d['nextpage'])+1;
if(nextpage>d['pagenum']){
end();
return;
}
var items = [];
S.each(d['photo'], function (item) {
items.push(new S.Node(S.substitute(tpl, item))); //tpl.render(item) 前面提到的通过模版生成内容。
});
success(items);
}
})
}
});
})
后台PHP的代码：
<?php $g = $_REQUEST; $page = $g['page']; $per_page = $g['per_page']; $start = rand(0, 11); $result = array(); $img = array( array('path'=>'./images/nv0.jpg', 'height'=>'346'), array('path'=>'./images/nv1.jpg', 'height'=>'345'), array('path'=>'./images/nv2.jpg', 'height'=>'317'), array('path'=>'./images/nv3.jpg', 'height'=>'305'), array('path'=>'./images/nv4.jpg', 'height'=>'450'), array('path'=>'./images/nv5.jpg', 'height'=>'306'), array('path'=>'./images/nv6.jpg', 'height'=>'342'), array('path'=>'./images/nv7.jpg', 'height'=>'354'), array('path'=>'./images/nv8.jpg', 'height'=>'345'), array('path'=>'./images/nv9.jpg', 'height'=>'344'), array('path'=>'./images/nv10.jpg', 'height'=>'364'), array('path'=>'./images/nv11.jpg', 'height'=>'342'), array('path'=>'./images/nv12.jpg', 'height'=>'344'), array('path'=>'./images/nv13.jpg', 'height'=>'389'), array('path'=>'./images/nv14.jpg', 'height'=>'316'), array('path'=>'./images/nv15.jpg', 'height'=>'345'), array('path'=>'./images/nv16.jpg', 'height'=>'343'), array('path'=>'./images/nv17.jpg', 'height'=>'307'), array('path'=>'./images/nv18.jpg', 'height'=>'243'), array('path'=>'./images/nv19.jpg', 'height'=>'345'), array('path'=>'./images/nv20.jpg', 'height'=>'318'), array('path'=>'./images/nv21.jpg', 'height'=>'345'), ); for($i=$start, $j=0; $j<$per_page; $j++){ $result['photo'][] = $img[$i+$j]; } $result['page'] = $page; $result['pagenum'] = 8; echo json_encode($result);
对于返回的数据：photo中存储的是图片信息，page是当前页码，pagenum是总页数，这两个是用来判断什么时候停止加载数据。某一次请求返回的数据返回如下：
{"photo":[{"path":"./images/nv2.jpg","height":"317"},{"path":"./images/nv3.jpg","height":"305"},{"path":"./images/nv4.jpg","height":"450"},{"path":"./images/nv5.jpg","height":"306"},{"path":"./images/nv6.jpg","height":"342"},{"path":"./images/nv7.jpg","height":"354"},{"path":"./images/nv8.jpg","height":"345"},{"path":"./images/nv9.jpg","height":"344"},{"path":"./images/nv10.jpg","height":"364"},{"path":"./images/nv11.jpg","height":"342"}],"nextpage":"1","pagenum":8}
这里要讲一下模板的使用与数据的填充，我们可以看到模板中有两个参数{path}, {height}，表明这两个参数是用来被替换的，返回的数据中如果正好有这个参数，那么就会用准确值进行替换。在success函数中有一个S.each，我们对d['photo']进行循环，那么程序就会把item中的path和height自动填充进去。
4.1 load与loader方法使用错误。刚开始看文档里有一个loader方法，以为就是用这个加载呢，结果竟然没有反应，而且js也没有向后台发送请求，后来才发现是load方法而不是loader
4.2 模板的位置不正确。原以为这是一个script标签，放在哪个位置都行，于是就放在了<div id="container"></div>这个标签里面的最后，结果在第一次加载数据时图片重叠了，后面的加载正常。后来就把模板放到了引用3个库文件之的后面，第一次加载就正常了。
4.3 后台返回的数据没有图片的高度。在网速不是很给力的情况下，就容易出现重叠的情况，因为图片还没有传过来，程序计算这个模块中的图片高度时就会出错，导致重叠。于是我就分别计算了每个图片的高度，然后在返回数据时也将图片的高度传回来，放到CSS文件里(模板文件里有一个style="height:{height}px"就是来获取高度的)。
这是第一次使用kissy来实现功能，依然还有很多不懂的地方，而且还有很多的原理也不是特别的明白，多多练习。