kissy初体验-waterfall

　　 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的更多相关文章

.NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验
Mac OS 虚拟机安装方法最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...
Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
Xamarin.iOS开发初体验
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0
【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语最近这几年的前端圈子,由于 ...
【Knockout.js 学习体验之旅】（1）ko初体验
前言什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
在同一个硬盘上安装多个 Linux 发行版及 Fedora 21 、Fedora 22 初体验
在同一个硬盘上安装多个 Linux 发行版以前对多个 Linux 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...
百度EChart3初体验
由于项目需要在首页搞一个订单数量的走势图,经过多方查找,体验,感觉ECharts不错,封装的很细,我们只需要看自己需要那种类型的图表,搞定好自己的json数据就OK.至于说如何体现出来,官网的教程很详 ...
Python导出Excel为Lua/Json/Xml实例教程（二）：xlrd初体验
Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...

随机推荐

求全局最小割（SW算法）
hdu3002 King of Destruction Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...
素数测试算法(基于Miller-Rabin的MC算法) // Fermat素数测试法
在以往判断一个数n是不是素数时,我们都是采用i从2到sqrt(n)能否整除n.如果能整除,则n是合数;否则是素数.但是该算法的时间复杂度为O(sqrt(n)),当n较大时,时间性能很差,特别是在网络安 ...
[转] mysql数据库分离和附加
1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 mysqldump -u wcnc -p smgp_apps_wcnc > wcnc.sql 2.导 ...
php最全基础，数组，函数，超全局变量，时间，回话，文件，php操作mysql
共享一份学习php最全基础语法知识的笔记原文链接:http://www.cnblogs.com/oscn/p/3607757.html:略有修改 http://www.cnblogs.com/l ...
MySQL两大存储引擎：MyISAM和InnoDB
Mysql有两大常用的存储引擎MyISAM,InnoDB,默认的形式是前者. 两者基本的差别是对事务处理.外键和行级锁的主持上,InnoDB支持事务处理.外键等高级特性,而MyISAM不支持.MyIS ...
Design Pattern in Simple Examples
Instead of defining what is design pattern lets define what we mean by design and what we mean by pa ...
HDU4135Co-prime（容斥原理）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4135 题目解析: 给你一个闭区间[A,B](1 <= A <= B <= 1015) ...
log4j2介绍及配置
一.log4j2概述在日常的开发,测试和生产环境中,日志记录了应用,服务运行过程中的关键信息,以及出现异常时的堆栈,这些信息常常作为查询,定位,解决问题的关键,因此在任何系统中,对日志的使用得当,将 ...
028-touch命令
1.创建空文件.可以创建一个空文件,也可以批量创建空文件. 2.更改文件/目录的访问时间,如果文件存在就更改访问时间,不存在就创建.# touch -a 3.更改文件的访问时间和修改时间.如果文件存在 ...
link标签 rel="stylesheet"
首先,link标签是用于当前文档引用外部文档的,其次,这个标签的rel属性用于设置对象和链接目的间的关系,说白了就是指明你链进来的对象是个什么东西的,具体的值及其所表示的关系如下:Alternate: ...

kissy初体验-waterfall

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

随机推荐

热门专题