天天看点
返回

kissy waterfall插件实现的瀑布流

忙活了几天，终于瀑布流实现了。

首先准备用的jquery的masonry和infinitescroll两个插件实现的，结果在网上找了好久，都没有实现，而且觉得这两个插件用着很不顺手，于是改用kissy的waterfall插件，最终实现了瀑布流。

KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 类库。它具备模块化、高扩展性、组件齐全、适合国情等特性。并且提供了详细的api文档和演示例子，非常容易学习。不多说了 直接上代码吧：

index.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>" target="_blank" rel="external nofollow" >

    <title>My JSP 'index.jsp' starting page</title>

 <meta http-equiv="pragma" content="no-cache">

 <meta http-equiv="cache-control" content="no-cache">

 <meta http-equiv="expires" content="0">   

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

 <meta http-equiv="description" content="This is my page">

 <!--

 <link rel="stylesheet" type="text/css" href="styles.css" target="_blank" rel="external nofollow" >

 -->

 <style type="text/css">

*{ padding:0; margin:0; font:"宋体" 12px;  }

body{background:#eee; color:#333p;}

ul li{ list-style:none;}

a{ text-decoration:none; background-color:none;}

a:hover{ text-decoration:none;}

.main{ width:1340px; margin:0 auto;}

.container{position: relative; width: auto; margin: 0 auto; border: none;}

#article {width: auto; min-width: 932px; padding: 8px 0 0 0;}

#ColumnContainer {position: relative; min-width: 692px; min-height: 500px; margin: 0 auto;}

#loadingPins {display: none; height: 20px; padding: 15px 0; text-align: center; font-weight: bold; border-top: 1px solid #ccc;}

#loadingPins img {display: inline-block; margin-right: 6px;}

#loadingPins span {font-size: 1.3em;}

#unloading {display: none; height: 20px; padding: 15px 0; text-align: center; font-weight: bold; border-top: 1px solid #ccc;}

#unloading img {display: inline-block; margin-right: 6px;}

#unloading span {font-size: 1.3em;}

.ks-waterfall{

  position: absolute;

        width: 200px;

        overflow: hidden;

        padding: 10px;

        border: 2px solid #ddd;

        margin-bottom: 20px;

        text-align: center;

        left:-9999px;

        top:-9999px;

}

.ks-waterfall img{ border:none; text-align: center; }

#BackToTop {position: fixed; right: 9px; bottom: 9px; width: 50px; padding: 20px 10px; text-align: center; text-transform: uppercase; color: #41545F; text-decoration: none; background-color: #fff; border: 1px solid #ececec; opacity: 0.9;  filter: alpha(opacity=90); cursor: pointer; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;}

#BackToTop:hover {color: #211922; opacity: 1.0; filter: alpha(opacity=100);}

</style>

 <script src="page/js/kissy.js"></script>

 <script src="page/js/base.js"></script>

 <script src="page/js/loader.js"></script>

 <script src="page/js/waterfall.js"></script>

  </head>

  <body>

  <div class="main">

 <div class="container">

     <div id="button_container"></div>

     <div id="article">

         <div id="ColumnContainer"> </div>

         <a id="BackToTop" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Scroll to Top</a>

         <div id="loadingPins"><img src="page/images/loading.gif" alt="Pin Loader Image"/><span>正在加载!&hellip;</span></div>

         <div id="unloading"><img src="page/images/loading.gif" alt=""/><span>无数据可加载！！！&hellip;</span></div>

     </div>

 </div>

  <script type="tpl" id="tpl">

   <div class="pin ks-waterfall" data-id="">

          <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="image">

              <img width="200" alt="{{url}}" src="{{url}}" />

          </a>

   <p>Title</p>

      </div>

  </script>

 <script  language="javascript">

 KISSY.use("waterfall,ajax,template,node,button", function(S, Waterfall, io, Template, Node, Button) {

    var $ = Node.all;//在文档根节点开始依据选择器字符串开始匹配元素查找

    var tpl = S.Template($('#tpl').html()),

        nextpage = 1,

   //Waterfall.Loader (config)   继承自 Waterfall , 异步获取数据后, 再进行排列.

        waterfall = new Waterfall.Loader({

        container:"#ColumnContainer",

        load:function(success, end) {

            $('#loadingPins').show();

            $('#unloading').hide();

            S.ajax({

                data:{

                 //   'method': 'flickr.photos.search',

                 //   'api_key': '5d93c2e473e39e9307e86d4a01381266',

                 //   'tags': 'rose',

                    'page': nextpage,

                 //   'per_page': 20,

                    'format': 'json'

                },

                url: 'PhotosSer',

                dataType:"json",

             //   dataType: "jsonp",

             //   jsonp: "jsoncallback",  //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

                success: function(d) {

               //   alert("======");

                    // 如果数据错误, 则立即结束

                    // 如果到最后一页了, 也结束加载

                    if(nextpage > d.pages){

                     $('#unloading').show();

                        end();

                        return;

                    }

                    nextpage = nextpage+1;

                    // 拼装每页数据

                    var items = [];

                    S.each(d.photo, function(item) {

                        item.height = Math.round(Math.random()*(300 - 180) + 180); // fake height//注释掉则没有瀑布流的效果

                        items.push(new S.Node(tpl.render(item)));//render渲染

                    });

                    success(items);

                },

                complete: function() {

                    $('#loadingPins').hide();

                }

            });

        },

        // align:'left', // center (default), right

        minColCount:2,

        colWidth:246

    });

     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("调整完毕");  

              }  

            });  

          }); 

});

 </script>

</div>

  </body>

</html>

下载kissy官网上的kissy库，下面是瀑布流需要的夹包：

kissy waterfall插件实现的瀑布流

有一些代码是直接从demo上直接复制过来的，修改后没有吧注释的部分删除。kissy瀑布流提供了一个模板：

<script type="tpl" id="tpl">

   <div class="pin ks-waterfall" data-id="">

          <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="image">

              <img width="200" alt="{{url}}" src="{{url}}" />

          </a>

   <p>Title</p>

      </div>

  </script>

其中{{}}中的内容，会自动寻找服务端返回的json对象中相同名字的数据。

详细源码：详细源码

web前端 瀑布流 kissy waterfall 源码 jquery
上一篇: 1.浅拷贝和深拷贝
下一篇: 微信小程序UI之旅：可分页加载，设置列数的智能瀑布流组件

继续阅读