说起来也是一个很久之前的问题了。那个时候还是在 17 年吧，六月份就要毕业，在做面试的项目，其中有一个功能用到了瀑布流来显示妹子图。那时候就遇到了一些问题，但是那时候确实什么都不懂，搞了很久，有些问题还是没有解决。这个月到了月底，临近放假了，也没有什么事情，就开始倒腾以前的项目，发现了这个问题。其中也是花了一点时间，踩了一些坑。在此记录一下。
主要的思路
主要的思路就是通过 RecyclerView 来做，通过设置 StaggeredGridLayoutManager 为 layoutManager 来实现瀑布流的效果。
遇到的问题
问题就是，列表图片加载的时候会闪烁，跳动，换位这几个问题。滑动之后也同样会出现这几个问题。那时候确实什么都不懂，就上网查，把各种方法都试一遍，还是不行。也分析不出问题，或者说还没有分析这个问题的能力。
其中踩到的坑
瀑布流的问题，在网上还是挺多资料的。
说的最多的就是 layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE); 这个方法，之前也不懂，反正大家都说这个可以解决（当然也有很多人说这个没什么作用），现在翻了一下源码的注释，大概了解了，就是因为瀑布流布局的特殊性，可能会有一些间隙，可以通过这个 api 设置 item 间隔的处理方式，有两个参数可以选择 GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS 和 GAP_HANDLING_NONE。
GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS：当滑动空闲时，也就是 SCROLL_STATE_IDLE 这个状态下时，会去检查 item 之间有没有间隙，如果有就调整 item 的位置，并使用动画的过度效果。
GAP_HANDLING_NONE：不去处理这个间隙。
设置了这个 layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE); 之后，确实不会跳动了，但是带来了另一个问题，就是既然不调整 item 的位置去填补这个空隙，就会有空隙，而这个空隙有多大呢？看图：
没错，看到的就是这个样子，整个布局就乱七八糟的了。
网上的大神很多，此记不成，再生一记！
layoutManager.invalidateSpanAssignments()：StaggeredGridLayoutManager 是会保持 item 和 span（其实我不是很理解这个东西要怎么理解） 的映射，如果要刷新这个映射就可以调用这个方法。
这个方法在什么时候调用呢？在滑动的时候。
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
//刷新
layoutManager.invalidateSpanAssignments();
}
});
但是单纯调这个方法，没什么卵用，而且布局会变得更乱，所以这个方法是在 上面layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE)的基础上，在使用这个东西。
虽然，跳动的情况好了一些，还是不理想，而且还会出现另一个问题，就是滑动到顶部会发现，顶部的 item 会有偏移的情况，然后拉到顶，就会刷新一下，调换位置了。。。。。
问题的根源
其实问题的根源就是图片的高度不固定，这不废话嘛，瀑布流的高度本来就不是固定的。。。
或者换种说法，你听起来或者就更明白一些了。就是图片的高度在 item 填充到 RecyclerView 的时候高度还是不确定，或者说是 0 。然后图片加载完成后，高度就出现了，就出现了各种问题。
是的，只要我们解决了这个高度的问题，其他问题就没有了。就不需要设置前面说到的两个设置。
这个高度要怎么确定呢？肯定不能写死，要根据图片的比例来，因为图片的宽度是确定的，我们只要根据图片的比例进行缩放就可以了。
具体的步骤是获取到图片，然后根据测量出宽高比，再根据 item 的宽度，设置 item 的高度。这就行了呀！
说是很简单啦。我之前也就想到过这个问题，然后就在 Glide 里面进行拦截，然后设置宽高，发现问题没有解决，就没有去细想了。其实那时候的思路大致是对的，但是那个拦截其实异步的，并没有同步执行，也就是说，在 Adapter 里面返回 view 的时候高度还是没有确定。所以这个问题也没有得到解决。
解决方案
再说一下网络上的解决方案是什么。
有一篇文章是这么说的，其实都大致类似。网络上的东西，你抄我的，我抄你的。获取到图片列表后，然后启动一个 IntentService 来下载这一页的图片，等下载完成后测量出宽高比，再通过 EventBus 发消息给 RecyclerView 添加数据，然后 Adapter 再进行刷新。
文章里面也说了，这样有个很大的问题就是加载出图片的时候巨慢，因为要等这页的图片下载完成和测量完成，然后才进行的渲染，所以速度很感人。
最终的结果就是让后台把图片的宽高传过来，然后获取到这页数据的时候，顺便把宽高给设置进去。
这几乎是网上所有的解决方案中最终的结果（我看到的都是这样）。
但是我调用的这个是第三方开放的 API 接口，我找谁给我加数据。。。。
我想了一下，能不能加载一张，然后显示一张呢？
可以的！
我要开始干了！ 思路是这样的，我也不用 IntentService (好像网上还有人以为懂个 IntenService ，就洋洋得意。。)，也不用 EventBus ， 用 RxJava 直接怼，因为前面这两个东西就是 异步 和 事件 嘛，这两个东西，RxJava 都有啊。搞什么花里胡哨的。
首先通过 Retrofit 发送请求，获取 Observer ，然后进行转化 map 获取到这一页的图片信息，再使用 flatMap 进行转化，把这个 list 的数据逐个发送，然后再进行下载图片，保存图片，获取宽高等操作，最后在 onNext 中获取一条数据就刷新这个 item (要注意不要刷新整个列表，其实前面说的会闪的问题，是因为刷新的时候，对整个列表都进行了刷新导致的)。图片就会一个个加载出来了。不用等所有的操作都执行完再渲染。代码如下：
ApiRequest.getServer().getFuliData(num, page)
// 切换线程
.compose(ApiRequest.<BaseGankBean<FuliBean>>preRequest())
.map(new Function<BaseGankBean<FuliBean>, List<FuliBean>>() {
@Override
public List<FuliBean> apply(BaseGankBean<FuliBean> fuliBeanBaseGankBean) throws Exception {
return fuliBeanBaseGankBean.getResults();
}
})
.flatMap(new Function<List<FuliBean>, ObservableSource<FuliBean>>() {
@Override
public ObservableSource<FuliBean> apply(List<FuliBean> fuliBeans) throws Exception {
return Observable.fromIterable(fuliBeans);
}
})
// 切换线程
.observeOn(Schedulers.io())
.map(new Function<FuliBean, FuliBean>() {
@Override
public FuliBean apply(FuliBean fuliBean) throws Exception {
String url = fuliBean.getUrl();
if (url!=null) {
try {
// 同步下载图片，可设置获取到的 bitmap 大小，但是实际下载的还是原图
Bitmap bitmap = Glide.with(getActivity())
.asBitmap()
.load(url)
.into(400, 400)
.get();
// 保存图片，作为缓存
ImgLoadUtil.wirteBitmap2File(bitmap, Const.FilePath.imgCache,fuliBean.get_id()+".png");
// 获取宽高
int height = bitmap.getHeight();
int width = bitmap.getWidth();
fuliBean.setHeight(height);
fuliBean.setWidth(width);
} catch (InterruptedException e) {
e.printStackTrace();
} catch (ExecutionException e) {
e.printStackTrace();
}
}
return fuliBean;
}
})
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Observer<FuliBean>() {
@Override
public void onSubscribe(Disposable d) {
}
@Override
public void onNext(FuliBean fuliBean) {
// 一个图片加载完成就渲染这个图片
dataList.add(fuliBean);
int index = dataList.indexOf(fuliBean);
adapter.notifyItemChanged(index);
}
@Override
public void onError(Throwable e) {
e.printStackTrace();
}
@Override
public void onComplete() {
//加载完成，页码加一
page++;
}
});
看完有没有一种畅快淋漓的感觉。越发觉得 RxJava 还是很好用的。然后 Adapter 也没什么好说的，获取到宽高比，计算一下宽高，该怎么搞就怎么搞。
贴一下效果图：
