這種布局當(dāng)時(shí)百度了下仪缸，發(fā)現(xiàn)沒有現(xiàn)成案例，有些用的canvas畫的纹蝴，估計(jì)有人用div做出來但由于比較簡(jiǎn)單便沒有分享出來吧海铆。
思路：
1.flex布局
2.奇偶行設(shè)定不同的類名迹恐，配置對(duì)應(yīng)的css
效果圖如下：
image.png
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入樣式 -->
<link rel="stylesheet" >
<title>DIV蛇形布局/盒子S形布局</title>
<style>
div#app {
text-align: center;
}
#app ul li {
list-style: none;
}
.list-li {
display: flex;
justify-content: start;
margin: 0 auto;
}
.reverse-li {
display: flex;
flex-direction: row-reverse;
justify-content: end;
margin: 0 auto;
}
i.arrow-down {
transform: rotateZ(90deg);
position: absolute;
left: 0;
right: 0;
bottom: -8px;
}
.li-box {
display: flex;
align-items: center;
}
.box {
position: relative;
padding: 20px;
}
.sub-box {
border: 1px solid;
width: 200px;
line-height: 64px;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- 根據(jù)奇偶行設(shè)置特定的類名，還需算出一行所占寬度卧斟，為了讓下一行的盒子能夠?qū)?yīng)上 -->
<li :class="{'list-li':(index+1)%2!==0, 'reverse-li':(index+1)%2===0}" :style="{width: maxLen===3?'988px':'1016px'}" v-for="(item, index) in list" :key="index">
<!-- 正向行 -->
<template v-if="(index+1)%2!==0">
<div class="li-box" v-for="(i, key) in item" :key="key+index">
<div class="box">
<!-- 自定義盒子內(nèi)容 -->
<div class="sub-box">{{i}}</div>
<!-- 不為第一個(gè)殴边，當(dāng)前項(xiàng)為最后一個(gè)，當(dāng)前項(xiàng)為最大值珍语，總數(shù)大于最大值 -->
<i v-if="key!==0&&key === maxLen-1 && key%(maxLen-1)===0 && originArray.length > maxLen" :class="{'el-icon-d-arrow-right':true, 'arrow-down':true}"></i>
</div>
<i v-if="key!==item.length-1" class="el-icon-d-arrow-right"></i>
</div>
</template>
<!-- 反向行 -->
<template v-else-if="(index+1)%2===0">
<div class="li-box" v-for="(i, key) in item" :key="key+index">
<div class="box">
<div class="sub-box">{{i}}</div>
<i v-if="key!==0&&key === maxLen-1 && key%(maxLen-1)===0 && originArray.length > maxLen" :class="{'el-icon-d-arrow-right':true, 'arrow-down':true}"></i>
</div>
<i v-if="key!==0" class="el-icon-d-arrow-left"></i>
</div>
</template>
</li>
</ul>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
originArray: [1,2,3,4,5,6,7,8,9,10,11,12,13], // 未處理的數(shù)組
list: [[1,2,3,4],[5,6,7,8],[9,10,11,12],[13]], // 處理后的二維數(shù)組
maxLen: 4 // 設(shè)定一行多少個(gè)
}
}
})
</script>
</html>
如果有更好的方法锤岸，望大佬們?cè)谠u(píng)論區(qū)不吝嗇的留下見解~
