:欢迎您的到来! 如果您遇到任何问题,请联系博主qq: 180181332
Vue

flex布局遍历图片整齐排列

罗小黑
2021-09-26 / 2 评论 / 363 阅读 / 正在检测是否收录...

使用row column属性布局来遍历图片数组会出现随机遍历排列。

flex布局遍历图片数组不会乱序。

html代码如下:

<div class="el_image">
    <div v-for="(item,index) in urls" :key="index" >
        <viewer :images="item" class="viewer" ref="viewer" :title="false">
            <img  :src="item" :key="index" style="width: 170px">
        </viewer>
        <div style="text-align: center">
            <el-tooltip class="classDelete" effect="dark" content="删除" placement="top">
                <span class="Delete" @click="deleteImg(item,index)"><i class="el-icon-delete"></i></span>
            </el-tooltip>
        </div>
    </div>
</div>

css代码如下:

.el_image{
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

flex-direction:row 表示一列一列的排列。

width: 100%; 表示这一行的空间大小

flex-wrap: wrap ; 表示占满空间后自动换行;

justify-content: space-evenly; 表示给每张图片的间隔和左右两边留空白空间看着美观。

数组代码如下:

imgLink1:[
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
],
imgLink2:[
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
],
本文共 104 个字数,平均阅读时长 ≈ 1分钟
0

打赏

海报

正在生成.....

评论 (2)

取消
  1. 头像
    葫芦小金刚 Lv.1
    Windows X64 · QQ Browser
    沙发

    不来个样式看看么;

    回复 删除 垃圾
    1. 头像
      罗小黑 Lv.4 作者
      Windows 10 · QQ Browser
      @ 葫芦小金刚

      新项目上线就可以看了!

      回复 删除 垃圾