注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

早衰男的巢

大音希声 道隐无名

 
 
 

日志

 
 

CSS+JS笔记:KISSY 瀑布布局 实现 备忘  

2012-04-26 18:45:39|  分类: UI/CSS/HTML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
UED,UI设计与我本是风马牛不相及的事,我的品位一向以技术宅特有的渣审美著称...可就那么天有不测风云..有个项目需要我这超级打杂插一脚来搞前端的事.. 那就...干咯!!

× 要实现的是界面上若干列高度不一小图文块,会自动垂直堆叠,滚动到页面底部还会异步加载更多数据(图文块)。

参照taobao的“爱逛街” love.taobao.com 的 实现~ 追溯源码.. 找到是用一个名叫 kissy 的 js控件里的 waterfall 模块 实现。

从这里学到了一个新的术语,上面我形容的那个东西原来叫做  瀑布布局

ok,以下是实现的备忘

1. 首先是要下载kiss的sdk(源码包 ... 废话) ,在html的head部分引用js
例如
<!--//waterfall plugins -->
<script type="text/javascript" src="js/kissy.js"></script>

2. 然后需要做瀑布布局的网页(其实也可以直接参考kiss官网的demo)


<div id="容器">
<!--// 这里图文块 -->
<div class="ks-waterfall">图文块1 可以加入任意东西</div>
<div class="ks-waterfall">图文块2 例如 img,div,span,ul,li..</div>

<div class="ks-waterfall">图文块3 可以加入任意东西</div> ……
<div class="ks-waterfall">图文块n 可以加入任意东西</div>
</div>

大概就是酱紫..
3.然后css需要至少给出以下的定义

<style>

#容器 {
position: relative;
width: 1000px; /*视需要随意*/
}

.ks-waterfall {
position: absolute;
overflow: hidden;
left:-9999px;
top:-9999px;
width:300px;
margin-bottom:10px; /*以下非必要*/
min-height:200px;
border: 1px silver solid;
background:white;

}

</style>


这里需要备忘一下 图文块的类名  ks-waterfall  必须是命名为这个,刚开始用的自定义的名字放在容器div内时候就是不行百撕不得骑姐~ 我擦我说为什么呢.... 后来看了下,是在 sdk 的 base.js 里定义死的名字,不能用自定义的的类名.. 参考 第 369 行

items = self.get("container").all(".ks-waterfall");


当然你固执要用自定义类名的话,可以把base.js 上面那行改了..就完事了

4. 用js加载布局

<script> function waterf_all(){
KISSY.use("waterfall", function (S, Waterfall) {
new Waterfall({
container: "#容器", //节点容器
minColCount: 3,
colWidth: 320 //每列的宽度
});
});
} window.open = waterf_all(); </script>


**后记:因为不想用KISSY的 Loader方法, 自写了异步加载的方法,加载完调用一次 waterf_all()就可以排列工整了;

**遇到的问题
A. 需要用到的js文件包括 kissy.js , waterfall.js, base.js, loader.js
B. 如果单元块里有<img 控件会因为无法判断图片的高度而出现布局位置的错位 ..其实这个问题在官方的DEMO里有说明
解决办法是:输出img时就指定img标签的宽高尺寸。php的实现方法如下:

<?php
$imgfile = "./images/a.jpg";
list($imgw, $imgh, $imgtype, $imgattr) = getimagesize($imgfile);

echo "<div class='ks-waterfall'><div><img src='".$imgfile."' $imgattr></div></div>";

?>






KISSY 官方网站:  http://docs.kissyui.com/ 

  评论这张
 
阅读(2605)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018