手摸手，带你实现移动端H5瀑布流布局

移动端瀑布流布局是一种比较流行的网页布局方式，视觉上来看就是一种像瀑布一样垂直落下的排版。每张图片并不是显示的正正方方的，而是有的长有的短，呈现出一种不规则的形状。但是它们的宽度通常都是相同的

因为移动端瀑布流布局主要为竖向瀑布流，因此本文所探讨的是竖向瀑布流

特点

竖向瀑布流布局主要有下面几种特点：

• 一般出现在移动端 H5 页面底部
• 主要以图片或视频为主
• 降低页面复杂度，节省空间，可以容纳更多内容
• 不规则展示，不会那么枯燥，用户体验好
• 难以或者说不能滚动到页面最底部

不同于传统的分页，瀑布流因为以上这些特点一般被用在这些场景下：

• 推荐机制下的信息 即根据用户画像推荐或者运营人员推荐的信息
• 大分类下的信息流 展示的信息有很多，它们的大分类都是相同的，适合用户不明确详细需要获得什么信息或商品的情况下
• 各个信息或商品之间没有比较强的相关性 和上面一条类似，展示的不是千遍一律的东西，相对独立的信息或商品也许能让用户意外发掘到想要的东西

实现

一般来说主要分为 CSS 实现和 JS 实现

CSS 实现主要是用到一些专门的样式属性，实现起来简单，但是往往会有兼容性问题

JS 实现的方法则不存在这些问题，并且能实现比较个性化的需求，但是实现起来比较麻烦

column 多列布局方法

column 实现瀑布流主要依赖两个属性

column-count 属性是设置共有几列

column-gap 属性是设置每列之间的间隔

column 兼容性

代码

  

    

      
      
      
001
    
    ······
    

      
      
008
    
  

flex 弹性布局方法

flex 实现瀑布流需要给父元素设置为横向排列。然后通过设置 flex-flow: column wrap 使其换⾏

代码

  

    

      
      
      
001
    
    ······
    

      
      
008
    
  

效果

可以发现图片排序顺序是先垂直方向，然后才是水平方向的。column 多列布局和 flex 弹性布局方法实现的效果图最终相似

JS + 懒加载方法

在不考虑兼容性或者没有特殊图片展示顺序需求下，只是实现瀑布流的话上面两种方案是够用的。如果要实现一些个性化的需求的话，还是得用 JS

主要思路就是：

1. 先将第一行排满
2. 计算第一行的所有图片高度，将第二行第一张图放在第一行最矮的图片后面
3. 进行玩步骤 2，重新计算当前所有列高度，避免步骤 2 添加完成后，该列高度还是最矮

完整代码

    
    
    
    
    



    

        

            
            
001
        
        
        

            
            
015
        
    

效果

不同于上面两个 css 实现的瀑布流，JS 实现的图片排序顺序是先水平方向，然后才是垂直方向

总结

如果实现效果简单不考虑兼容的的话可以选择使用 CSS 实现；若要兼容老版本浏览器或者实现一些个性化的需求还是得用 JS 实现

当然除了上文说的这些方法以外，也可以使用第三方库 Masonry 实现