解决angular-deckgrid高度不均衡和重加载的问题

在项目中使用angular-deckgrid+ng-infinite-scroll实现瀑布流的无限加载。但是实际测试中发现deckgrid有2个比较严重影响体验的BUG:

  1. 每次添加新的card,整个deckgrid都会重新加载,导致用户无法停留在刚才浏览的位置。正确的表现应该是只加载新添加的项,同时保持浏览位置不变。
  2. Deckgrid总是将各项平均分配到各个列,如果某个列的卡片高度大部分比较大,可能导致某个列非常的长,而其他列非常的短。

第一个问题

该问题在官方项目的issue#68有提及,使用symrad/angular-deckgrid的版本可解决此问题,但同时引入了另外一个问题:当deckgrid只有一项时,如果重新设置同样的数据,数据源仍然只有一项,但是显示上却变成两项(一模一样的两项),如下图所示:

sample image

我对该情况做了特殊处理以解决此问题,查看github源码

第二个问题

第二个问题其实也就是官方项目的issue#75,但是没有最终解决方案,只能自己动手了。

正如原作者所说的,要给出通用的解决方案是比较复杂而且繁琐的,原因在于给deckgrid的model添加新项时,页面还没渲染,所以没法提前获取高度来控制怎么更加地分配新项到各个列上。但是如果你像我一样是想实现无限下拉加载的瀑布流效果的话,那这个问题是可以解决的,具体思路如下:

首次生成deckgrid时,没法获取高度,但是当下拉滚动条以加载新项时,是可以获取到已经生成deckgrid各列的高度的。所以在添加新项之前,可以先对比已经生成的各列的高度,然后确定出更好地分配新项到各个列的策略。

这里我采用的是一个比较简单的策略,找出最高的那一列和最低的那一列,如果两者相差超过600px就做高度均衡,就将新项的第一项填充到高度最低的那一列,然后剩余的新项仍然按照原策略继续分配。也就是说,如果需要高度均衡,每次添加新项,高度最低的那列比其他列多添加一项。这个简单的方法保证了各个列的高度不会相差太大。

具体可参考我在github的源码,我的项目也使用了自己修改过的版本。

posted @ 2017-03-12 21:43  枫叶落一地  阅读(296)  评论(0编辑  收藏  举报