javascript - $.ajax获取数据后如何按这个规则排列?

问题描述

问 题

流程通过$.ajax获取，需要按照图中样式进行排列，奇数列从左至右，偶数列从右往左。有哪些方法可以做到？

支持css3、jquery、js

解决方案

这个问题理解为布局问题，与 Ajax 无关。

渲染布局主要包括两个函数 renderRow 与 renderItem 分别表示渲染行，渲染行中的一个流程块，下面分析它们各自的职责要点：

renderRow：

1. 循环渲染行容器，根据奇偶输出左箭头/右箭头

renderItem：

1. 循环渲染单个流程块

2. 判断是否是当前流程，若是，渲染相应样式

3. 奇行 && 该行最后一个 && !最后一步流程，则在其下方渲染下箭头

4. 偶行 && 该行第一个 && !最后一步流程，则在其下方渲染下箭头

5. 若是该行最后一个，则右边不渲染 左/右箭头

基本上需要注意的就这些，仔细思考下不难实现

这篇关于javascript - $.ajax获取数据后如何按这个规则排列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！