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

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

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

第一个问题

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

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

第二个问题

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

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

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

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

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

转载于:https://www.cnblogs.com/pheye/p/6539512.html