记录一个利用css中的float布局的S型排序效果

有一个需求是将报告日志显示成下图的样式。根据拿到的list数据，按顺序排列成S型。

 效果实现 

    主要利用 float 实现。确定好div的宽度，每行显示5个。

 奇数行： 向左浮动，先判断是否是最后一个，是的话则不显示箭头，不是的话判断是否是第五个，第五个不显示向右箭头 显示向下箭头

 偶数行：向右浮动 ，从右向左数，第一个不显示向左的箭头，第五个（并且不是最后一个）显示向下的箭头

HTML部分

   <el-dialog title="报告日志" :visible.sync="reportLogVisible" v-dialogDrag width="1200px">
      <div class="log-box">
        <div style="font-size:20px;text-align:center" v-if="logList.length<1">暂无日志数据!</div>
        <div class="log-chart" v-else>
          <div v-for="(item,index) in logList" :key="index">
            <!-- (( (Math.floor(index / 5)+1) % 2 )!=0) 奇数行 ——> -->
            <div class="fl" v-if="(( (Math.floor(index / 5)+1) % 2 )!=0)">
              <div class="log-item">
                <!-- 显示节点方块 -->
                <template v-if="item.is_open==0">
                  <div class="step cur-pointer" :class="item.type == 1 ? 'red-bgc':(item.type == 2 ? 'green-bgc':'')" @click="openLogDetail(item)">
                    <div class="step-text">
                      <p class="step-text-content">{
  {item.operation_c