css 蛇形排序

339 阅读1分钟

先看效果

996902-20240723113040993-298934756.png

需求:

    一个【 4  * ?】的网格布局,奇数行 布局 从左往右,偶数行 布局 从右往左。

思路1:

    js将数组按4个每份进行分割,将偶数份进行反向,然后再将分割后的数据,重新组装。( 太麻烦,劝退。)

思路2:

    flex布局,然后用order属性来更改排列顺序。

补充:

    order 属性 : 控制 flex 子项目 的排列顺序 ; 主要是修改前后顺序 , 原来是 1 - 2 - 3 排列顺序 , 可以将其改为 2 - 1 - 3 排列顺序 ;

        默认值 : order 子项目属性 的默认值为 0 ;

        属性值 是数值 , 数值越小 , 排列越靠前 ;

代码: