apicloud中处理社区中图片的一张两张三张排布问题

apicloud中处理社区中图片的一张两张三张排布问题

//css部分
#community>van-pull-refresh {
            width: 100%；
        }

        .messagetitle #imgStyle_s {
            width: 100%;
            position: relative;
            height: 100%;
        }

        .messagetitle #imgStyle_s .imgStyle {
            display: inline-block;
        }

        .messagetitle #imgStyle_s .imgStyle_1 {
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50%;
            position: absolute;
            width: 100%;
            height: 250px;
        }

        .messagetitle #imgStyle_s .imgStyle_2 {
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50%;
            width: 49%;
            height: 160px;
        }

        .messagetitle #imgStyle_s .imgStyle_2:nth-child(1) {
            margin-right: 1.5%;
        }

        .messagetitle #imgStyle_s .imgStyle_3 {
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50%;
            width: 32%;
            height: 114px;
        }

        .messagetitle #imgStyle_s .imgStyle_3:nth-child(2) {
            margin: 0 1.5%;
        }

        #hendatu {
            width: 100%;
            position: absolute;
            top: 50px;
            left: 0;
            z-index: 9999;
        }

        #hendatu .hendatupian {
            width: 100%;
        }
//html部分
<div class="content" style="width:100%;">
                    <ul>
                        <li v-for="(item,index) in list">
                            <ul>
                                <li @click="handle(item.id)">
                                    <div>
                                        <p><img :src="item.picture"></p>
                                        <div>
                                            <span>{{item.creatorname}}</span>
                                            <p>{{item.cdatestr}}</p>
                                        </div>
                                        <!-- <span><img src="../image/biaoshi_blue_ibiaoshi.png"></span> -->
                                    </div>
                                    <!-- <div>
                                    <span><img src="../image/huo_red_biaoshi.png"></span>
                                    <p>人气</p>
                                </div> -->
                                </li>
                                <li style='width: 100%' class="messagetitle">
                                    <p @click="handle(item.id)">{{item.title}}</p>
                                    <div id='imgStyle_s' style="width:100%;height: 250px" v-if='item.num == 1'>
                                        <div @click='fangBigTu(item.img)' class="imgStyle_1 imgStyle" v-for='(it,index) in item.img' :style="{backgroundImage: 'url(' + it + ')'}"></div>
                                    </div>
                                    <div id='imgStyle_s' style="width:100%;height: 160px" v-if='item.num == 2'>
                                        <div @click='fangBigTu(item.img)' class="imgStyle_2 imgStyle" v-for='(it,index) in item.img' :style="{backgroundImage: 'url(' + it + ')'}"></div>
                                    </div>
                                    <div id='imgStyle_s' style="width:100%;height: 114px" v-if='item.num == 3'>
                                        <div @click='fangBigTu(item.img,index)' class="imgStyle_3 imgStyle" v-for='(it,index) in item.img' :style="{backgroundImage: 'url(' + it + ')'}"></div>
                                    </div>
                                </li>
                                <!-- <li>
                                <ul>
                                    <li>
                                        <div><img src="../image/shequ_pinglun_icon.png"></div>
                                        <p>66</p>
                                    </li>
                                    <li>
                                        <div><img src="../image/shewu_dianzan_weidianliang_icon.png"></div>
                                        <p>666</p>
                                    </li>
                                    <li>
                                        <div><img src="../image/shequ_fenxiang_icon.png"></div>
                                        <p>分享</p>
                                    </li>
                                </ul>
                            </li> -->
                            </ul>
                        </li>



                    </ul>
                </div>
//js部分
getlist() {
                    var that = this;
                    fnAjax(false, 'contentmanage/searchcontentmanageforpage', {
                        body: {
                            type: 'post',
                            pageno: pageno1,
                            pagesize: 10,
                        }
                    }, 'application/json', 'post', false, function(ret, err) {
                        pageno1 = ret.data.page;
                        that.list = ret.data.items; //返回信息的数组
                        for (var i = 0; i < that.list.length; i++) {
                            if (that.list[i].img.length && that.list[i].img.length == 1) {
                                that.list[i].num = 1;
                            } else if (that.list[i].img.length && that.list[i].img.length == 2) {
                                that.list[i].num = 2;
                            } else if (that.list[i].img.length && that.list[i].img.length == 3) {
                                that.list[i].num = 3;
                            } else if (that.list[i].img.length && that.list[i].img.length > 3) {
                                that.list[i].num = 3;
                                var a = that.list[i].img;
                                that.list[i].img = [];
                                that.list[i].img.push(a[0]);
                                that.list[i].img.push(a[1]);
                                that.list[i].img.push(a[2]);
                            }
                        }
                    })
                }

如果暇兹，需要稍微加点东西，这是用apicloud大框架，引入vue.js写的。