kissy waterfall插件实现的瀑布流

最新推荐文章于 2013-10-29 16:59:00 发布

原创最新推荐文章于 2013-10-29 16:59:00 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#瀑布流 #kissy #waterfall #源码 #jquery

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍使用KISSY库实现瀑布流布局的过程。通过KISSY提供的Waterfall插件，结合AJAX异步加载数据，成功实现了动态加载图片的瀑布流效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

首先准备用的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%>">

    <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">


<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="#">Scroll to Top</a>
         <div id="loadingPins"><img src="page/images/loading.gif" alt="Pin Loader Image"/><span>正在加载!…</span></div>
         <div id="unloading"><img src="page/images/loading.gif" alt=""/><span>无数据可加载！！！…</span></div>
     </div>
</div>
  <script type="tpl" id="tpl">
   <div class="pin ks-waterfall" data-id="">
      <a href="#" 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 (d.stat != 'ok') {
                        alert('load data error!');
                        end();
                        return;
                    }
                    */
                    // 如果到最后一页了, 也结束加载
                    /*
                    if (nextpage > d.photos.pages) {
                     alert("++++");
                        end();
                        return;
                    }
                    */
                    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>