`
yangjayup
  • 浏览: 251892 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

kissy瀑布流学习笔记

 
阅读更多

 

KISSY 是由淘宝前端攻城师们发起创建的一个开源 JS 类库。

她遵循的原则是 小巧灵活、简洁实用、愉悦编码、快乐开发。

本次主要是使用kissy的waterfall 实现瀑布流效果。 

 

 

首先是查看了kissy的介绍和api文档,了解了大致的用法,然后下载了waterfall的demo到本地运行测试,最后将代码移植在自己的项目中使用。

 

基本的介绍和使用,api里都有说明,这里主要说说遇到的问题

kissy和jquery类似,首页要引入基础的js库也就是kissy.js,然后在根据自己使用中用的功能引用不同的js,如果我这里要使用瀑布流,并且是动态加载的。所以就引用了base.js loader.js waterfall.js这些demo中都有,当然有了这些js文件,瀑布流的效果已经可以实现。可以对一个最基本的板块进行瀑布流排版

如:

 

KISSY.use("waterfall", function (S, Waterfall) {

      new Waterfall({

        container: "#ColumnContainer", //节点容器

        minColCount: 4,

        colWidth: 320 //每列的宽度

      });

    });

 

 

具体配置参数,参考api文档。


但发现demo上,是可以动态加载数据的,并且发现kissy提供一个内容模版的功能,可以设定好动加载数据的模版,网模版里填写数据即可,这个需要用到template.js,也是一个非常使用的插件。

demo里的这段代码就是模版

 

<script type="tpl" id="tpl">
  <div class="pin ks-waterfall" data-id="">
    <a href="#" class="image">
      <img height="{{height}}" alt="" src="{{photopath}}"/>
    </a>
    <p class="description"></p>
    <p>
      <button class="del">删除</button>
      <button class="grow">增高</button>
    </p>
  </div>
</script>
 

 

 

里面被"{{","}}"这个包含的都会被动态加载返回的json数据里的同名替换成对应的值。对于需要动态加载数据的需要Waterfall.Loader,直接在代码中备注说明吧

demo中的html并没有引入template.js仍可以使用,但我一直到自己的工程就必须在页面上引入这个js,还有就是demo有用到Button这个插件,但我引入button.js后仍然不能正常运行,最后只好将Button这个给去掉就正常了,原因不清楚,如有高人知道,请赐教 )最后使用修改后的js备注说明

 

KISSY.use("waterfall,ajax,template", function (S, Waterfall, io, Template) {
      var tpl = Template($('#tpl').html()); //定义内容模版
      var nextpage = 1;
        var waterfall = new Waterfall.Loader({
            container: "#ColumnContainer", //节点容器 
            adjustEffect:{
              duration:0.5,
              easing:"easeInStrong"
            },
            diff :10, //api文档中如此解释  滚动时, 当最小高度的列超过在屏幕高度+已滚动高度+diff时, 会去加载更多数据 ,发现如果不加此值,拖动滚动条是,不会自动加载更多


            load:function (success, end) {
              $('#loadingPins').show();
              S.ajax({
                data:{
                  'from':'water',
                  'page':nextpage,
                  'per_page':20,
                  'format':'json'
                },
                url:'/photo/photos.ydd',
                dataType:"json",
                /*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, function (item) {
                    item.height = Math.round(Math.random() * (300 - 180) + 180); // fake height  设置瀑布流假的高度,每个高度不一样,做出瀑布流的效果
                    items.push(tpl.render(item));  //tpl.render(item) 前面提到的通过模版生成内容。
                  });
                  success(items);
                },
                complete:function () {
                  $('#loadingPins').hide();
                }
              });
            },
            minColCount:2,
            colWidth:228
          });

          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");
          });

          $("#ColumnContainer").on("click", ".del", function (event) {

            var w = $(this).parent().parent(".ks-waterfall");
            waterfall.removeItem(w, {
              callback:function () {
                alert("删除完毕");
              }
            });
          });


          $("#ColumnContainer").on("click", ".grow", function (event) {
            var w = $(this).parent().parent(".ks-waterfall");
            waterfall.adjustItem(w, {
              process:function () {
                w.append("<img src='http://farm9.static.flickr.com/8167/7688895968_25ed78629e_m.jpg' width='220' height='200px;'>");
              },
              callback:function () {
                alert("调整完毕");
              }
            });
          });

    });
 

 

 

 

 

 

 

分享到:
评论
1 楼 xiangzhenlu1990 2013-07-11  
问下 这个
<script type="tpl" id="tpl"> 
  <div class="pin ks-waterfall" data-id=""> 
    <a href="#" class="image"> 
      <img height="{{height}}" alt="" src="{{photopath}}"/> 
    </a> 
    <p class="description"></p> 
    <p> 
      <button class="del">删除</button> 
      <button class="grow">增高</button> 
    </p> 
  </div> 
</script> 
中 我怎么加判断语句呢
比如说我想判断{height}的大小 根据不同的情况来进行不同的操作 如何判断呢

相关推荐

    kissy瀑布流(含demo)

    KISSY库,可以实现瀑布留效果。 - build: 构建好的发布文件 - docs: API 文档 - src: 源码、测试等开发资源 - tools: 打包压缩等自动化工具 瀑布流效果在src\waterfall\demo.html

    瀑布流布局-kissy-asp.net瀑布流_json,,

    是利用kissy提供的插件做出来的瀑布流布局,因为之前的项目很大,文件很大,我不能把整个项目拷上来吧,so,所以我把主要的东西整理下发上去,这个直接运行是看不到效果的,因为读取数据那部分要你自己去写(到你...

    瀑布流布局-kissy-asp.net瀑布流_json数据

    这个demo是以前做的一个项目拷贝下来的,是利用kissy提供的插件做出来的瀑布流布局,因为之前的项目很大,文件很大,我不能把整个项目拷上来吧,so,所以我把主要的东西整理下发上去,这个直接运行是看不到效果的,...

    异步加载的js瀑布流

    在"异步加载的js瀑布流"中,Kissy是一个JavaScript库,它被用于实现这个功能。Kissy是一个轻量级、模块化的前端开发框架,支持AMD(Asynchronous Module Definition)规范,能够帮助开发者组织代码,提高代码的可...

    Kissy学习教程

    这个“Kissy学习教程”压缩包文件包含了深入理解并掌握Kissy的资源,帮助开发者快速上手和应用Kissy到实际项目中。 在学习Kissy之前,我们首先要了解JavaScript库的基本概念。JavaScript库是一组预先编写好的...

    kissy 学习

    在这个"Kissy 学习"资料包中,我们可以通过"Kissy一些功能介绍.xlsx"和"demo"来深入理解和掌握Kissy的核心特性和使用方法。 首先,让我们详细了解一下Kissy的主要特点和功能: 1. **模块化**:Kissy 基于CommonJS...

    kissy学习教程

    为了帮助大家更好地理解和应用KISSY框架,教程作者明河编写了这套KISSY学习教程,旨在通过系统完整的讲解,使初学者能够快速上手并精通KISSY框架。 在KISSY学习教程中,首先介绍了KISSY框架的基本概念,包括它的...

    Kissy 15天学会.zip

    【Kissy框架详解】 Kissy 是一个轻量级的JavaScript库,专为前端开发者设计,旨在简化Web开发过程,提高代码...学习者应按照教程的指导,结合实际操作,逐步掌握Kissy的各项技能,从而在15天内达到熟练使用的目的。

    kissy-1.4.8.rar

    Kissy 是一个强大的Web前端开发框架,源自阿里巴巴集团,旨在简化前端开发流程,提高开发效率。Kissy 1.4.8 版本是这个框架的...Kissy 1.4.8 版本的文档包含了所有这些关键知识点,是学习和使用 Kissy 的重要参考资料。

    Web常用UI库 kissy.zip

    6. **文档完善**:Kissy提供了详尽的API文档和示例,帮助开发者快速上手和解决问题,降低学习曲线。 在`kissy-master`这个压缩包中,通常会包含以下内容: - `src`目录:存放Kissy库的源代码,按照模块结构组织,...

    kissy源文件代码

    淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。 KISSY ...

    提示补全组件:Kissy Suggest

    标题中的“Kissy Suggest”是指Kissy框架中的一个组件,Kissy...对于想要学习或使用Kissy Suggest的开发者来说,这些信息是非常宝贵的,他们可以从这些资源中学习如何在自己的项目中有效地利用这个组件,提升用户体验。

    kissy editor 2.0

    《淘宝帮派编辑器Kissy Editor 2.0详解》 Kissy Editor 2.0是淘宝帮派推出的一款强大的富文本编辑器,专为提升用户在社区中的内容创作体验而设计。它集成了多种功能,使用户可以方便地创建、编辑和格式化文本,同时...

    淘宝KISSY前端开发框架

    KISSY提供稳定的核心,包括 oo、dom、Event、Anim、Ajax 等;强大且易用的脚本加载器,特有的 loader;丰富的UI组件,包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具备模块化、高扩展性、组件齐全...

    Kissy Suggest 自动提示例子

    《Kissy Suggest 自动提示实现详解》 在IT领域,自动提示功能是提升用户体验、提高工作效率的重要手段,尤其在编程、搜索等场景下。Kissy Suggest 是一个基于 JavaScript 的开源库,专为实现自动提示功能而设计。...

    修改的Kissy富文本编辑器

    "修改的Kissy富文本编辑器"是一款基于Kissy框架的增强型文本编辑器,它在原生的Kissy Editor基础上进行了定制和优化,旨在提供更丰富的功能和更好的用户体验。Kissy是一个轻量级的JavaScript库,专注于前端开发,而...

    kissy文件 kissyteam-kissyteam.github.com-901d2cd.rar

    这个版本可能包含了 Kissy 框架的更新、修复或者新功能,同时也可能包含了相关的文档和示例,供开发者学习和参考。 Kissy 框架的设计理念是模块化和高性能。它提供了一套完整的模块加载和管理机制,使得开发者可以...

    kissy-1.4.8.zip

    kissy-1.4.8.zip,淘宝最新前端开发包

    KISSY 1.4.8

    KISSY 1.4.8,一个淘宝用的类似jQuery的前端框架

    js KISSY框架阿里云滑动下拉导航菜单效果代码

    js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码

Global site tag (gtag.js) - Google Analytics