1. 功能介绍

  现在越来越多的网站开始瀑布流方式布局,瀑布流式布局(百度百科:瀑布流),是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。应该说以图片展示为主的网页会使用这种方式,便于浏览,而且最主要的是减轻服务器压力,加快页面加载速度。在网页显示前,只查询一点点的数据,基本能铺满一个屏幕即可,然后使用ajax再次进行数据查询。

  不过相应的,瀑布流也是有它的缺点的:用户向下滚动出现较多内容后,无法记忆之前出现的商品的位置(传统的,我们可以记住它在哪一页,减轻了重新搜索商品的压力);我们要考虑实现这种功能的JS脚本的复杂度和浏览器兼容性;还有就是页脚,当用户想要滚动要底部使用页脚时,程序却又加载新的内容再次将页脚隐藏了;最重要的是,不利于SEO。

  我在实现瀑布流的过程中,有网友推荐说kissy框架能够很快地实现该功能,而且曾经也就想学习kissy框架了,那就通过这个功能学习一下吧。

  官方地址:http://docs.kissyui.com/1.3/docs/html/api/component/waterfall/

  2. waterfall样例介绍

  你可以狠狠地点击这里

  你可以一直滚动鼠标,会发现当滚动条滚动到底部的时候数据就会加载。最终会加载8页的数据,然后停止加载。

  

  

  3. 使用说明

  如果我们仅仅是想要格式化一下已经加载的数据,而不动态加载数据的话,就简单了。

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="data:images/nv0.jpg" alt="" />
<div class="title">hierarch</div>
</div>
<div class="ks-waterfall">
<img src="data:images/nv1.jpg" alt="" />
<div class="title">hierarch</div>
</div>
<div class="ks-waterfall">
<img src="data:images/nv2.jpg" alt="" />
<div class="title">hierarch</div>
</div>
<div class="ks-waterfall">
<img src="data:images/nv3.jpg" alt="" />
<div class="title">hierarch</div>
</div>
<div class="ks-waterfall">
<img src="data:images/nv4.jpg" alt="" />
<div class="title">hierarch</div>
</div>
<div class="ks-waterfall">
<img src="data:images/nv5.jpg" alt="" />
<div class="title">hierarch</div>
</div>
<div class="ks-waterfall">
<img src="data:images/nv6.jpg" alt="" />
<div class="title">hierarch</div>
</div>
<div class="ks-waterfall">
<img src="data: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. 遇到过的问题

  4.1 load与loader方法使用错误。刚开始看文档里有一个loader方法,以为就是用这个加载呢,结果竟然没有反应,而且js也没有向后台发送请求,后来才发现是load方法而不是loader

  4.2 模板的位置不正确。原以为这是一个script标签,放在哪个位置都行,于是就放在了<div id="container"></div>这个标签里面的最后,结果在第一次加载数据时图片重叠了,后面的加载正常。后来就把模板放到了引用3个库文件之的后面,第一次加载就正常了。

  4.3 后台返回的数据没有图片的高度。在网速不是很给力的情况下,就容易出现重叠的情况,因为图片还没有传过来,程序计算这个模块中的图片高度时就会出错,导致重叠。于是我就分别计算了每个图片的高度,然后在返回数据时也将图片的高度传回来,放到CSS文件里(模板文件里有一个style="height:{height}px"就是来获取高度的)。

  5. 总结

  这是第一次使用kissy来实现功能,依然还有很多不懂的地方,而且还有很多的原理也不是特别的明白,多多练习。

kissy初体验-waterfall的更多相关文章

  1. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  2. Xamarin+Prism开发详解四:简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  3. Spring之初体验

                                     Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...

  4. Xamarin.iOS开发初体验

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0

  5. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  6. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  7. 在同一个硬盘上安装多个 Linux 发行版及 Fedora 21 、Fedora 22 初体验

    在同一个硬盘上安装多个 Linux 发行版 以前对多个 Linux 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...

  8. 百度EChart3初体验

    由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...

  9. Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验

    Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...

随机推荐

  1. 问答项目---账号密码异步校验后进行PHP校验

    在做登陆的时候,通过异步校验后还需要通过PHP来校验账号和密码的正确性. PHP校验账号密码: public function login(){ if(!IS_POST){echo "页面不 ...

  2. Oracle Database Memory Structures

    Oracle Database creates and uses memory structures for various purposes. For example, memory stores ...

  3. DFS判断正环

    hdu1217 Arbitrage Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  4. 混合开发中ios兼容问题

    1. z-index无效,设置层级,发现再ios中无效,后来发现是设置了 -webkit-overflow-scrolling:touch 设置这个属性之后.层级设置失效 2.@keyup事件的问题, ...

  5. Jenkins构建时提示maven版本问题

    在使用Jenkins进行项目构建的时候出现下面问题 [INFO] Scanning for projects... [WARNING] [WARNING] Some problems were enc ...

  6. treeview(树加载)

    数据库结构 id:int类型,主键,自增列:     Name:char类型:     paraid:int类型 窗台拖入控件treeview. 1.版本1 using System; using S ...

  7. js jquery.pagination.js分页

    1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css( ...

  8. HRBUST - 1153 意外 HRBUST - 1153 (数论)

    意外 Time Limit: 1000 MS Memory Limit: 65536 K Total Submit: 326(87 users) Total Accepted: 97(63 users ...

  9. pandas的DataFrame用法

    用来生成DataFrame数据 1.说明: class pandas.DataFrame(data=None, index=None, columns=None, dtype=None, copy=F ...

  10. vs 2015

    基于应用要求和要使用的语言选择所需工具. Xamarin for Visual Studio:针对所有设备的 C# 中的常用基本代码 Apache Cordova with Visual Studio ...