1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      小程序瀑布流解决左右两边高度差距过大的问题

        发布时间£º2019-02-20 15:31:08   作者£º芝麻糊   我要评论

      这篇文章主要介绍了小程序瀑布流解决左右两边高度差距过大的问题的相关资料£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧

      想要实现瀑布流的布?#20013;?#26524;£¬并且是按照从左到右顺序显示的话£¬css布局方式暂时还不能满足我们的需求¡£参考小红书的瀑布流效果£¬小红书是分左右两栏的£¬按照奇数偶数来显示就可以¡£

      <view class="waterfall">
           <view class="waterfall-left">
                 <view wx:if="{{index%2 == 0}}" class="item"></view>
           </view>
           <view class="waterfall-right">
                 <view wx:if="{{index%2 == 1}}" class="item"></view>
           </view>
      </view>

      但是问题来了£¬随着每个元素高度的不确定性£¬很大几率会出现左右两栏高度相差大的问题¡£

      解决方法£º

      要解决这个问题£¬我们要?#39029;?#23548;致每个元素的高度不同的原因£¬一般是?#35745;?#30340;高度£¬也可能是根据条件显示的某些区域£¬建议只有?#35745;?#30340;高度不同£¬其它部分的高度保持不变£¬这会使得我们的计算变得简单¡£
      大概思路£¬取得左右两栏的高度£¬计算左右两栏的高请输入代码度差值£¬移动两栏差值threshold的2分之1£¬如图£º

      上面是理想的状态£¬但是我们不可能切开元素£¬我们要知道高度高的一边的是否有符合移动的元素£¬如果高度高的那栏中高度最小的元素minH 小于 差值threshold£¬那么我们可以移动£¬可以取长边某个与差值的二分之一高度最接近的一个元素minH(一般是高度最小的那个£¬也可以取巧地移动高度最小的一个)¡£如果高度最小的元素比差值还大£¬则不需要移动¡£


      那么怎么移动£¬默认给元素一个属性position£¬值为center£¬如果该元素要移动到左边£¬那么给该元素一个属性£ºposition:left;优先根据position属性来显示£¬其次才根据奇数偶数来显示£¬如下£º

      <view class="waterfall">
           <view class="waterfall-left">
                 <view wx:if="{{item.position=='left' || (index%2 == 0&&item.position=='center')}}" class="item"></view>
           </view>
           <view class="waterfall-right">
                 <view wx:if="{{item.position=='right' || (index%2 == 1&&item.position=='center')}}" class="item"></view>
           </view>
      </view>

      至此£¬高度相差较大的问题就可以解决了¡£

      我们如何计算两栏的高度呢£¿

      重点是获取?#35745;?#30340;宽高£¬我们就可以知道两栏的高度£¬这里分两种情况£º

      1. 接口返回?#35745;?#30340;宽高

      接口返回了?#35745;?#30340;宽高£¬那么我们直接累加?#35745;?#30340;高度£¬就可以比较两栏的高度£¬得出高度差¡£

      如果较高的一边的minH比两栏高度的差值threshold小£¬即minH < threshold,那么minH就需要移动

      这种方式在拿到数据的同时£¬我们就可以知道某个元素是否需要移动¡£处理完数据后马上渲染到视图层¡£

      这种方法?#27604;?#26159;最省心的£¬但是接口也有可能不返回?#35745;?#30340;宽高£¬于是就要用第2种方法了¡£

      2. 接口不返回?#35745;?#30340;宽高£¬在?#35745;¬load事件取得?#35745;?#23485;高

      监听?#35745;?#30340;load事件£¬获得?#35745;?#30340;宽高£¬在最后一张?#35745;¬load完之后£¬用boundingClientRect测量两栏的高度£¬得出高度差¡£

      这种方法则必须在?#35745;?#21152;载完£¬再测量某个元素是否需要移动£¬元素移动会比较明显¡£

      以上就是本文的全部内容£¬希望对大家的学习有所帮助£¬也希望大家多多支持脚本之家¡£

      相关文章

      • canvas学习?#22987;?#20043;2d画布基础的实现

        这篇文章主要介绍了canvas学习?#22987;?#20043;2d画布基础的实现的相关资料,小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2019-02-21
      • 小程序瀑布流解决左右两边高度差距过大的问题

        这篇文章主要介绍了小程序瀑布流解决左右两边高度差距过大的问题的相关资料£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2019-02-20
      • h5网页水印SDK的实现代码示例

        这篇文章主要介绍了h5网页水印SDK的实现代码示例的相关资料£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2019-02-19
      • canvas绘图按照contain或者cover方式适配并居中显示

        这篇文章主要介绍了canvas绘图按照contain或者cover方式适配并居中显示的相关资料£¬文中通过示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的
        2019-02-18
      • Canvas 文本转粒子效果的实现代码

        这篇文章主要介绍了Canvas 文本转粒子效果的实现代码的相关资料£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2019-02-14
      • canvas 橡皮筋式线条绘图应用方法

        这篇文章主要介绍了canvas 橡皮筋式线条绘图应用方法的相关资料£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧
        2019-02-13
      • web页面?#35745;?#23454;现

        这篇文章主要介绍了web页面?#35745;?#23454;现的相关资料£¬文中通过示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的朋友们下面随着小编来一起学习学习
        2019-02-12
      • Canvas系列之滤镜效果

        Canvas 真的是一个神奇的东西£¬不仅能够绘制各种图形¡¢文本和位图£¬还能够对位图进行复杂的像素运算和处理¡£因此像滤镜这些东西£¬其实 Canvas 也可以来实现¡£本文介绍了Can
        2019-02-12
      • canvas学习总结三之绘制路径-线段

        这篇文章主要介绍了canvas学习总结三之绘制路径-线段的相关资料£¬文中通过示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的朋友们下面随着小
        2019-01-31
      • 移动端Html5中百度地图的点击事件

        这篇文章主要介绍了移动端Html5中百度地图的点击事件的相关资料£¬文中通过示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的朋友们下面随着小
        2019-01-31

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>