纯css实现朋友圈照片排列布局（附单图自适应宽高）

效果图

image.png

思路

设置flex实现正常的三列布局

ul{
    padding:0px;
    width:300px;
    display: flex;
    /* justify-content: flex-end; //用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
    flex-wrap: wrap; //换行   
}

每个元素占32%，除每行最后一个元素外设置右外边距为2%

li{
    list-style: none;
    width:32%;
    height:100px;
    margin-top: 5px;
}
/* 除了每行最后的元素,其他都留右外边距 (100-32*3)/2*/
li:not(:nth-child(3n)){
    margin-right: 2%; 
}

特殊情况1，只有一张图，用css选择器判断为一张图片时，改变图片大小

/* 当ul只有唯一的li时 */
li:only-child{
    width: 200px;
    height: 200px;
}

只有一张图，不固定宽高，宽高自适应

/* 当只有唯一一张图时 自适应宽高*/
li:only-child img{
    max-height: 200px;
    width: auto;
    max-width: 200px;
    height: auto
}

特殊情况2，只有四张图，图片需呈两行两列布局（偶数个数的图右外边距加大，奇数个数的图外边距仍为2%）
伪元素选择器思路：
元素为倒数第4个 && 第一个的元素时，判断为共有四个元素；
选择其后的同级元素的偶数个设置比较大的右外边距；
选择其后的同级元素的奇数个设置原来的右外边距；（对第三个元素恢复间隔）

/* 有四张图时  even偶数  odd奇数 */
li:nth-last-child(4):first-child ~ li:nth-child(even){
    margin-right: 32%;
}
li:nth-last-child(4):first-child ~ li:nth-child(odd){
    margin-right: 2%;
}

完整代码：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ul{
                padding:0px;
                width:300px;
                display: flex;
                /* justify-content: flex-end; //用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
                flex-wrap: wrap; //换行   
            }
            li{
                list-style: none;
                width:32%;
                height:100px;
                margin-top: 5px;
            }
            /* 除了每行最后的元素,其他都留右外边距 (100-32*3)/2*/
            li:not(:nth-child(3n)){
                margin-right: 2%; 
            }
            /* 当只有唯一一张图时 定宽高*/
            /* li:only-child img{
                height: 200px;
                width: 200px;
            } */
            /* 当只有唯一一张图时 自适应宽高*/
            li:only-child img{
                max-height: 200px;
                width: auto;
                max-width: 200px;
                height: auto
            }
            /* 有四张图时 */
            li:nth-last-child(4):first-child ~ li:nth-child(even){
                margin-right: 32%;
            }
            li:nth-last-child(4):first-child ~ li:nth-child(odd){
                margin-right: 2%;
            }
            li img{
                width:100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        朋友圈文字...
        <ul id="ul">
            <li v-for="(item,i) in picture" :key="i">
                <img :src="item.src" >
            </li>
        </ul>

        <script src="./lib/vue.min.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#ul",
                data: {
                    picture :[
                        { src: './img/1.jpg' },
                    ]
                }
            });
        </script>
    </body>
</html>

最后编辑于：2020.12.14 11:34:47