flex动态布局

Question

目前遇到的问题是 后端返回一个list，list里面有多条数据，每条数据上都有一个属性 标识位置。 目前前端需要实现根据返回数据属性的不同，左右展示两列数据，属性为left的展示在左侧 属性为right的展示在右侧，然后依次向下排版。

这个应该怎么实现呢？ 请各位大神帮忙分析下。

Answer 1

比较简单的办法，是维护两个数组，一个放left的数据，一个放right的数据，通过flex控制左右两个大容器的布局，容器内部从上到下的布局由容器自己控制，数据就是刚才的那两个数组

Answer 2

假设一行放两条数据，一个左一个右，
那我们提前依据属性对结果做一个排序，
把数据变成[左，右，左，右...]的样子，渲染在页面中就可以了吧。

let arr = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0],
    data = [],
    type = 1;

while (arr.length) {
    let i = arr.indexOf(type),
        item = arr.splice(i, 1);
        data.push(item[0])
        type = (type === 1) ? 0 : 1;
}