需求:
- 一张图片时宽度满屏,
- 两张图片时各占一半,
- 三张图片时一行展示3张图片,
- 四张图片时一行展示2张图片
- 五张~九张时一行展示3张
我第一反应是想到:浮动,或者用行内元素。
浮动跟行内元素:功能是可以实现的,我个人觉得会比较麻烦的,要自己各种算内边距图片的占比等等,还算的边距不统一。
后面灵光一闪,怎么就没有想到用flex 布局呢!!!!(被自己蠢哭了 )
推荐可以看下阮一峰 Flex 布局教程 简单明了,通俗易懂 ,有兴趣的童鞋可以去看一下。
话不多说了,上看代码:
需求1 className:one
需求2、4 className:two
需求3、5 className:three
<div class="imgBox">
<div :class="imgList.length === 1? 'one' : (imgList.length === 2 || imgList.length === 4)? 'two' : 'tree'" v-for="(img,index) in imgList" :key="index"