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

早衰男的巢

大音希声 道隐无名

 
 
 

日志

 
 

CSS+JQuery备忘:KISSY 瀑布布局续——容器高度bug修正  

2012-04-27 11:43:20|  分类: UI/CSS/HTML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Kissy有个奇怪的问题,不知道是不是我用的方法不对,很奇怪地,加载完瀑布布局后,容器的高度是以倒数第二个元素作为参照,最后一个元素总会超出元素从容器里凸出来。

也没有心思去逆向研究kissy的源码,因为太庞大复杂了,写了个js函数来修正这个问题
*需要用到JQuery

function fix_Contain_Height(){
//因为kissy插件bug,最后一个图文块会凸出. 原因未明
//手动修正容器高度
var lastItem = $(".waterfall_item:last"); //.waterfall_item 是瀑布元素的CSS类名
var liHeight = lastItem.height()+2+11; //因此高度值不含上下边框和margin,所以手动 +2,再+11

var liPos = lastItem.offset();
var liTop = liPos.top; //高度

var cPos = $("#div_mod_main").offset(); // 容器ID #div_mod_main
var cTop = cPos.top; //容器高度

var cHeight = $("#div_mod_main").height(liTop+liHeight-cTop); //设置容器 height
}

在执行向瀑布容器append元素的时候js脚本末尾加上

//fix height
setTimeout(fix_Contain_Height,1000);

代表,注入数据的1秒后修正容器高度。为什么要添加个延时,是因为发现顺序执行下来的话,可能会因为kissy调整瀑布布局异步操作的关系尚未把last元素挪动到位,导致获取的top坐标错误,所以加上了一点点的延迟,时间不长的话这个不会影响浏览体验的

/*--------------------- 我是补充的分割线 -----------------------*/
午饭过后越想越不对..一验证果然有问题...
当倒数第二个item长度比最后一个还要长的时候...我以最后一个作为参照就杯具了,修正的容器高度往回缩了回去...
于是再度修正一下..将函数 dix_Contain_Height() 的最后一行改写成如下:

function ..(){
......

var cHeight = $("#div_mod_main").height(); //先获取容器原来的高度
var newHeight = liTop+liHeight-cTop;
if(newHeight>cHeight){ //判定最后一个瀑布item是否高于容器高度,如果不是则不需要修正高度
$("#div_mod_main").height(newHeight); //设置高度
}
}

这次ok了


备忘如上.
  评论这张
 
阅读(937)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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