vue实现多组数据拼接的瀑布流方法

vue实现多组数据拼接的瀑布流方法

最近写项目的时候碰到一个瀑布流的需求也是卡了非常久，一般的瀑布流方法无非是判断每一列的高度，新数据加到矮的那一列，还有就是用css3做，但是css3的数据添加是竖向排列的不符合我的要求。
我面对的需求如下：
有四组数据，一组是商品数据haitaoData，一组是品牌数据brandList，一组是关注数据attentionLIst，一组是排行榜数据rankingsList。每一屏请求一组七个商品数据，按照如下的插入方式把品牌、关注和排行榜数据插入：

刚开始我是打算这么做：
页面渲染的时候遍历haitaoData，index%7==1/3/5的时候分别插入品牌、关注和排行榜的dom，在一个ul里面排列，通过操作dom获取li的index左右排列（知道在vue里操作dom不妥，但是当时没有什么解决方法）。问题是：品牌、关注和排行榜的数据较短，用这种方法不会有瀑布流效果，会造成短数据下空白很大的情况。如果用左浮动，第一个数据长，第二个数据短，第二行的第三个数据就会卡在第二个数据下面，样式上有问题。

后来想到了一个最笨的方法：
按照排列逻辑把所有数据放在同一个数组dataList，遍历haitaoData，index%7==1/3/5的时候分别插入attentionList[index/7]的数据。记得判断品牌、关注、排行榜等的数据存不存在。渲染数据的时候，如果dataList存在likeCnt，渲染推荐商品，如果dataList.modelFullId == 31584品牌，31585排行榜，31586关注一次放置十个，通过标识判断插入的是什么类型的数据。样式上分成两列，判断index的奇偶来实现数据的左右插入。
这里要注意此方法的前提是要有标志性的字段判断你要渲染的是什么数据，刚开始的时候觉得这个方法太过复杂不太想做，但是真正实施之后发现逻辑基本相同，并且能完美满足需求，何乐而不为呢。

以上只是提供了一个思路，可能还有改进的地方，以后会更新。