解决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>