解决ff下kissy waterfall图片重叠问题

ff和google不同,如果图片没有加载完成是不占高度的。这样在瀑布流展示时,由于一瞬间图片还没有下载下来,这样瀑布流模块的高度计算(也就是top值的计算)是没有图片的高度,当图片加载完成后,上一个模块往下撑开,就会被下面模块遮挡,出现重叠的bug。

 

 

解决方法:在照片的div上高度写死。由于瀑布流的图片高度是预先知道的,这样可以在图片的div上写死这个高度,及时图片还未加载完成,高度也都预留好了,这样图片加载好后,就不会被遮挡了。

 

 

<script type="tpl" id="tpl">
  <div class="pin ks-waterfall poster-grid-float">
    <div class="posterimg" style="height:{{height}}px"> //这里的height是重点
      <a href="/area/photo/{{id}}" title="{{description}}" target="_blank"><img alt="{{photoDesc}}" src="{{coverpath_x200}}" height="{{height}}"/></a>
      <div class="postermask" style="display:none;"><a href="/area/photo/{{id}}" title="{{photoDesc}}" target="_blank">{{photoDesc}}</a></div>
    </div>
    <div class="poster-grid-user clearfix">
      <a class="fleft" href="/user/{{mid}}" target="_blank">
        <img src="{{userPhoto}}" alt="{{mname}}">
      </a>
      <div class="fleft">
        <a class="fcblue" href="/user/{{mid}}" target="_blank">{{mname}}</a>
        <br />
        <span>{{posttimeStr}}</span>
      </div>
      <div class="fright">
        <div><a title="好评" href="/area/photo/{{id}}#comments" class="dot-goodmini">{{goodnum}}</a></div>
        <div><a title="回应" href="/area/photo/{{id}}#respond" class="dot-commentmini">{{reviewnum}}</a></div>
      </div>
    </div>
  </div>
</script>

你可能感兴趣的:(water)