/**
 * 作者：Pich
 * 原文連結：http://me.woblog.cn/
 * QQ群：129961195
 * 微信公眾號：woblog
 * Github：https://github.com/lifengsofts
 */

概述

從前我們想實現一個瀑布流效果是很難得，需要自己自定義控制元件，可以說是很麻煩，而且效能也好優化，但是現在就不一樣了，因為RecyclerView到來了，他可以很方便的實現瀑布流效果。下面就來看看吧，先來一張效果圖：

使用StaggeredGridLayoutManager

StaggeredGridLayoutManager layoutManager = new
 
 StaggeredGridLayoutManager(3,
  LinearLayoutCompat.VERTICAL);
rv.setLayoutManager(layoutManager);

然後需要注意的就是在Adapter裡面需要動態計算圖片的高度和寬度。

計算Item的高度

我們這裡使用的是Glide圖片載入框架，其他圖片載入框架也有類似的方法，我們需要做的就是在圖片載入回來拿到圖片的高度和寬度動態計算Item的高度。

Glide.with(WaterfallFlowActivity.this).load(d).diskCacheStrategy(DiskCacheStrategy.ALL)
  .into(new
 
 SimpleTarget<GlideDrawable>() {
    @Override
    public void onResourceReady(GlideDrawable resource,
        GlideAnimation<? super GlideDrawable> glideAnimation) {
      Log.d("TAG", iv.getWidth() + "," + resource.getIntrinsicWidth());
      //計算ImageView的高度
      int imageWidth = resource.getIntrinsicWidth();
      int
 
 imageHeight = resource.getIntrinsicHeight();
      int imageViewWidth = iv.getWidth();

      double scale = imageWidth * 1.0 / imageViewWidth;
      LayoutParams layoutParams = iv.getLayoutParams();
      layoutParams.height = (int) (imageHeight / scale);
      iv.setLayoutParams(layoutParams);

      iv.setImageDrawable(resource);
    }
  });

現在效果其實就已經差不多出來了，但是還有一些優化的細節需要處理。