大家好，我是零一，微信朋友圈都發(fā)過吧？它支持最多發(fā)9張圖片，所以我們也稱之為九宮格要知道發(fā)1~9任意數(shù)量的圖片時(shí)，這些圖片的排列方式可能有所不同大體有這四種排列情況：情況一：只有一張圖，完整展示整張圖

1張圖情況二：2~3張圖的情況，無法完整展示每張圖，則在第一排依次排開（一排最多3張）

2張圖 & 3張圖情況三：4張圖的情況，無法完整展示每張圖，每排2張圖，共2排

4張圖情況四：5~9張圖的情況跟情況二類似，也無法完整展示每張圖，每排最多3張圖，依次排開

5張圖其實(shí)就是對(duì)不同數(shù)量的圖片做了一個(gè)排版的自適應(yīng)，原理也很簡(jiǎn)單，我們一起來用CSS實(shí)現(xiàn)一下吧~沒有完全按照微信的排版是，自己改良了一下，最終完整北京排名seo優(yōu)化渠道效果見下面這個(gè)視頻??關(guān)閉觀看更多更多正在加載正在加載退出全屏

視頻加載失敗，請(qǐng)刷新頁(yè)面再試

刷新

視頻詳情 創(chuàng)建容器先創(chuàng)建一個(gè)元素作為容器并將其設(shè)置為 Flex

布局，且可換行.pictures-adaptive {display: flex;flex-wrap: wrap;}1張圖片只有1張圖片的情況最簡(jiǎn)單，就讓圖片直接展示就好，但大于1張圖時(shí)，所有圖片都是無法完全展示的，它們是以一個(gè)正方形的形式展現(xiàn)的，所以我們需要給

img 外側(cè)包一個(gè)容器，便于后續(xù)控制圖片的展示

>樣式也不用設(shè)置，最終效果是這樣的

1張圖片多張圖片大于1張圖片時(shí)，圖片需要在正方形容器中非完整居中展示，可以讓 img 標(biāo)簽相對(duì)于外部容北京排名seo優(yōu)化渠道器元素相對(duì)定位/* 相對(duì)定位，img相對(duì)于.wrap相對(duì)定位 */.wrap {position: relative;

overflow: hidden;margin-bottom: 2%;}/* 大于1張圖片時(shí)，img標(biāo)簽的樣式 */.wrap:not(:nth-child(1):nth-last-child(1))img

 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}分析了一下，多張圖片的情況可以分為 2、4張圖片

或者 3張圖片、5~9張圖片2或4張圖片2或4張圖片時(shí)都是一行只有兩個(gè)北京排名seo優(yōu)化渠道圖片，且兩張圖片各占一半左右的寬度/*  2張圖片  */.wrap:nth-child(1):nth-last-child(2)

,.wrap:nth-child(2):nth-last-child(1),/*  4張圖片  */.wrap:nth-child(1):nth-last-child(4),.wrap:nth-child(2)

:nth-last-child(3),.wrap:nth-child(3):nth-last-child(2),.wrap:nth-child(4):nth-last-child(1){width: 49%

;padding-bottom: 49%;}/* 每行北京排名seo優(yōu)化渠道的兩張圖片中間間隔2%的寬度 *//*  2張圖片  */.wrap:nth-child(2):nth-last-child(1),/*  4張圖片  */

.wrap:nth-child(2):nth-last-child(3),.wrap:nth-child(4):nth-last-child(1){margin-left: 2%;}最終效果是這樣的

2張圖片

4張圖片3張圖片3張圖片的情況是：三張圖排列在同一行/*  3張圖片  */.wrap:nth-child(1):nth-last-child(3),.wrap:nth-child(2):nth-last-child(2)

,.wrap:n北京排名seo優(yōu)化渠道th-child(3):nth-last-child(1){width: 32%;padding-bottom: 32%;}/*  間隔  */.wrap:nth-child(2):nth-last-child(2)

,.wrap:nth-child(3):nth-last-child(1){margin-left: 2%;}最終效果是這樣的

3張圖片5~9張圖片5~9張圖片的情況其實(shí)跟3張圖片的排版是一樣的，不過可以簡(jiǎn)化寫法/*  5張以上圖片  */.wrap:nth-child(n + 5),.wrap:nth-child(1):nth-last-child(n

+ 5),.wrap:nth-北京排名seo優(yōu)化渠道child(1):nth-last-child(n + 5) ~ .wrap{width: 32%;padding-bottom: 32%;}/*  間隔  */.wrap

:nth-child(n + 5):not(:nth-child(3n + 1)),.wrap:nth-child(1):nth-last-child(n + 5) ~ .wrap:not(:nth-child(3n

 + 1)){margin-left: 2%;}最終效果是這樣的

9張圖片完整代碼

="IE=edge">微信朋友圈圖片九宮格排版自適應(yīng)（改編版）

.pictures-adaptive {display: flex;fl北京排名seo優(yōu)化渠道ex-wrap: wrap;    }.wrap {position: relative;overflow

: hidden;margin-bottom: 2%;    }/*  3張圖片  */.wrap:nth-child(1):nth-last-child(3),.wrap:nth-child(2):nth-last-child(2)

,.wrap:nth-child(3):nth-last-child(1)    {width: 32%;padding-bottom: 32%;    }/*  間隔  */.wrap:nth-child(2)

:nth-last-child(2),.wrap北京排名seo優(yōu)化渠道:nth-child(3):nth-last-child(1)    {margin-left: 2%;    }.wrap:not(:nth-child(1)

:nth-last-child(1))img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;

    }/*  2張圖片  */.wrap:nth-child(1):nth-last-child(2),.wrap:nth-child(2):nth-last-child(1),/*  4張圖片  */

.wrap:nth-child(1):n北京排名seo優(yōu)化渠道th-last-child(4),.wrap:nth-child(2):nth-last-child(3),.wrap:nth-child(3):nth-last-child(2)

,.wrap:nth-child(4):nth-last-child(1)    {width: 49%;padding-bottom: 49%;    }/* 每行的兩張圖片中間間隔2%的寬度 *//*  2張圖片  */

.wrap:nth-child(2):nth-last-child(1),/*  4張圖片  */.wrap:nth-child(2):nth-last-child(3),.wrap:nth-ch北京排名seo優(yōu)化渠道ild(4)

:nth-last-child(1)    {margin-left: 2%;    }/*  5張以上圖片  */.wrap:nth-child(n + 5),.wrap:nth-child(1):nth-last-child(n

 + 5),.wrap:nth-child(1):nth-last-child(n + 5) ~ .wrap    {width: 32%;padding-bottom: 32%;    }.wrap:nth-child(n

+ 5):not(:nth-child(3n + 1)),.wrap:nth-child(1):nth-last-child(n + 北京排名seo優(yōu)化渠道5) ~ .wrap:not(:nth-child(3n + 1))

    {margin-left: 2%;    }

="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBYVFRgWFRYYGBgYGBgYGBgaGBgYGBgYGBgZGRgYGBgcIS4lHB4rIRgYJjgmKy8xNTU1GiQ7QDs0Py40NTEBDAwMEA8QHhISHzQrISQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0Mf/AABEIAKgBLAM北京排名seo優(yōu)化渠道BIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAADBAACBQEGB//EADwQAAIBAgQDBAgGAQMEAwAAAAECAAMRBBIhMUFRYQVxgZEGEyIyocHR8EJSorHh8RQVcpIWgrLSQ1Ni/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAIDAQQF/8QAIxEAAwEAAgICAwEBAQAAAAAAAAECEQMSITFBUQQiYRNxMv/aAAwDAQACEQMRAD8A+eUo0kTRoxTedmHMmMhZbJJTMMqxRkCQRhJTJLKIDIZQS+WDpmHWKx0UyThSEls北京排名seo優(yōu)化渠道sw3AGWTJCWlgs3QwAacC9OP5ZR0gqMcmeUnRTjD05AkbReouKchpRhacMlO8HRqnRA0pZaM0f8aWXC2i9kb0M5aUPSpx1MPGEwtpjsZcbFES+8uKNo+uFhUwsm7RRQzPpUrTY7PqE358B4aztPCjlGsPQynSSq00UiGmHw1K4udSdgN/4nGa24F7Gy6HxvGsoAyrubXIGp7pR6apva57ybd053Z09TCxFMljnOp/CuoHU8uMcR8q5V0XW+vta63NtBNFMM7+8Minn7xG4sI5Q7NQDX42J8joJr5F8irje6jz北京排名seo優(yōu)化渠道iYHOdBoTqTqT/AN39R2l2GAb2v3/ITdYommn7mLtix+FST98BsIr5afo1ccr2DpYFEFlS/MnaLY7FBQRm12sLWH33w1Sox94hR37eAmXiKtMHbMeepHxhKbfkyqSXgzMW5YaA2v7xO8TGGv1mhVqX1sIuwJnZLxHHWNirIoOutuUHn5Ktoyacp6uU0k0eDUw6NAgQiideHGqHKTxyk0zUMaovEclJoeyyBZym8OBEKryRRLrOLLgRWOi0us4s7aYMS0iidE6IGouqTr04SmIa0m6wop0z3pyuSPskoaUbsK5北京排名seo優(yōu)化渠道FUp3jFOnLJT1jCpFqhpk4lOEalpLqsMoknRZQDpUIzTp9AZemkOqybsdQVFMcoX1UiwoaI6HUorSTXpGqaX4QdKmTNfD0QOEnVDqQCUTsBbmeJ+kPRwSg3t4mOBLdIKriFXqZLWG/RCvEDx/iJVsQBufvuEVx2KZuNugiGW8eY32I6wLXxNzcDztf4Rc12A007pfLIUvLpJE22xKoCd4M048ac4acdUSaM805U0poGlJ6qN2M6mcaUH6uajU7QBpzVYjk+WCEQRdTCoZ3KmcDhDKKYVNIujnnGUqnnG7AoGa北京排名seo優(yōu)化渠道TR2nEKb9BNLC5TvEqkWiWHWiTrJ6ozQw9BW/FaNf4F9pzvkSOpcTaMZaZvCmkZo/4tt5GwvHyh3Qf5sy8sgEcajBZY+6L1wtSEMolKaxmnTkqKSUlIZ0lkpd0TR+ovlhUEIKc7lmOhlJwSyGVtOgSY6GkeXzxVTDJFY6DprHVpgWilIR+khJk6oeUM4ewtpNGmT3RajTtGAZz1RrRG6xJ+JMbJib3MaWDQi4uZXLGmpyuWWVEnIDLJlhwksKcOxnUVyyZI36uUKQ7GYLFJMkYKSrLG7GdRVklMkZZZW0ZUY5北京排名seo優(yōu)化渠道PioSFRYVUvLiiZ6R5eFUSFVDOpSMYSm3KBuHaQj+HQxdEI4R/DERaZSUPYYGaVCoRximHUR9Kc57w641DCuG3AMPQRB+H4/WVoULx2nhwJGnh0T/QWI7PR1umhtMOpg2F7jaeiqgLxhKTLxse/WZPJUoK45o8stKxjNNJ6TE4RClyLWG43mL6vltGXJ2J/wCfUEaci04ZUl1SY2OkCKQZpx71UGUiaNgoacoyRw05z1cNDBRVhUWMLRh6dGI6GUnaFOaVBIKkgjaLOeqKpYFWWJkUSwWII2ByE6CXfD2trry北京排名seo優(yōu)化渠道5eMsTaVzDU78hGWmNsTfWVCQ4S8KlGU7YY0LpShRSjASERIjoPCEmpwbJNFqcoaU1UZ4M9klGSaBowbUoyoMM9klMkdZBKerjKjGj4jTMbR4qlON0aBnsnjouCY1Rud7zlOlGUpRWyiQ1RojneHWgOkUTSMirprJvSs4XU2OxEfo1OszRUHGGTEKJlLR5rDXpVZp4espFswvPNDFcjLiuZKo0tPJhvV0ccLjmNZ3Ctc2mQmPIELhsZzMRw8HVrT0GNr5FHXcGD9lsoNvgLeMyXrFjc6yoqNwuPGJ/ni/o3fz北京排名seo優(yōu)化渠道/AA0Hw9ttdbdLwow2gIN+fC0z6ONZeMOjsxveFaasHVpDjIMKeFvGEwyE76zR9TYSFN6U8L2YtXDEbi37SgozXDrYg7cjF2K30EzswSExThUSGcX1kUTGxkdQARlSIuyAziUwDxk3OmsfUTjGCR++OpVUix8jMUkqbkRIllSNPSG4trawBlStvu8YO6ZVUhAsghFEwVs4tOMUqM7RWPogErxcXc5+TkaE6mHgHpWmtaBq0byl/j4tQk8r+TIZYF1mjUw4G7CLvTA2BPwnM5c+zonkTM91gsseYjkILOYyZX2北京排名seo優(yōu)化渠道fEqI52j9ELM5O4ecPSrLe256G89xnkI10KWlvZ6xJawG5P31gKnbdJDbNf/aQR3E7fvJldXyaZQdZxpjYn0mRdEAfzt5m0y8T6R1W93Kg5AXv3kwSZjpI9QxI7pA5nl8P6SVUUhQuYnVyCSRrpba2u220zXxjsbljvcAaAHoBpNFdL4PdjFAXuwFt9du+Aftqku9RT3a/xPDvUZveYm21yTbuvOAwxGd2etq+lKj3EZupOX4axOn6R1Q4Z/d4otl05A2vPP3nQ0MQd6+z3+H9LaSZb086Ovta+2CDqM3Tf7E北京排名seo優(yōu)化渠道0P+oKbtak4Ol8rgAnjo2ma3h858yVoejl/E5Ui1rLm+YtEcT7KTzV6Pf0+2Kg9+mrX2y3UnwN+cLV9LBS96n7VvdD6/8AjoJ4en2nUS6pUOXh7IG/EDXL4TuHRXLF6qq293ztmPK6g+ZmVEv2hlzV6TPUt6Xu7WZbLcWAJCi/4n4kePCbWA9JVRgPXX01vqh12A5adDPA1MGUFxUouNPcqKW16GxjWBwKvoayJx9q5tz1W8m4nP4NPJe+T6zQ7boVhZXUN+UmwvzHMd0JxOoPcZ8nPZLjepStwKurX8Nx4ie北京排名seo優(yōu)化渠道gw1CqhUJi6LrYEhyRlN9huduRnPXGl6Z0xyN+0e5puCePlGGoHgbnlxnn8LjXHsK9MtrqK10OuhIKXHd8Z1e0cUDkZKb8ijr4GwY6eAkurb8FnRu5OBveEWnFcRVrpTDWpq1icjMzEka2GwJi3Z/pDTclXApuN7+7pvZth423mY36M7I2BSO8stMwWGxiPfI6tbfKwNowCYjDTtMdPlGCARplHfr46Tzna3pIlL2UtUfjY+yv+4jc9B8J5mv2zVdsxcg8MpKgDpaHVk68s+k1SqrdiNNzsB5xMdqUvzX8Gnh北京排名seo優(yōu)化渠道B2gxAzXblckj47RqhiSbRaeDxxp+2fQaGMQ29pRfa3z/maCV1OzDzE8BRxXAGabYzIAt9TqZsfkufgW/xE/TPWNiFG7DzERxHaqDTMfKefqY8Zd5iY3tK3Oa/yqpYZP4inzTPU1O2aYOzd9h+04valFt3seTAj47TwVftRtbWHxMQrY5z+Lw4DjJqtGcSvR9Dxna9FBo2Y8Auvx2mDV9Iql9FpgcjcnxN55F8W2vtHXfXnrFfWSi/4Zp4ouW3LHvgmRufxtD00A/EfOGV+/a2956e0vSPPyfsTDG/tBj43hE北京排名seo優(yōu)化渠道7m6ezeEFBTuW/rb9oVcOtrXMG6+gSn7A5eY/SPGdeiLXsbcxGRQW1rn78ZP8AEXm334zE6+mbk/YkafIzjUiOB+BmguDTr/XjO/4ScL915u39GdZ+xFKN/wCdJ1qNv7jJ7PHBj4mWGAH11m/sZki3+I/DW3UQWQ7aeYmnTpZTcE9Rff4Rc9ng31OvW8Jd75RtTPwLerYS4ptvaMf4HUyL2eOf7/WN+wuSB9U22U/3OqjcjHBhBzPmfrLJgVH231iN39DdZ+xNFY7C8vkYcI8uDFyQSCep+scpYLNoXP34xXV北京排名seo優(yōu)化渠道/Q6lP5MdCeUKt+U207GUm+dvACH/0JCLZ357Lx8OkV0/oZcZhqeMLTqWNwbEa34zYT0ZQ/jf9P0jC+jCfnf8AT9IjpjrjZnf6rUNgajHiLsWIPS+0Oe0wxBK2PMX18zNEei1PfO/6fpLJ6M0/zv8Ap+kTX8D9a+TPHahDAg689v2navajOSXdmJte7E3mwnotT/O/6fpGF9Faf53/AEf+sSmzVDPOpiZYYiei/wCmKf53/R9JdfRqn+d/0/SSrsx1LMKnV0jlGseE1k9H0A99/wBP0hE7FQbO36fpJOaZRLA北京排名seo優(yōu)化渠道WBY3uYWrVJYnX+I9S7JB09Y3kJqYP0bVrEu3kIq4qfhDPkUryYAckTMxSEmfRh6M0rbn4RDGeiKHUOw8BGX4vLPkR/kcdeNPm9RDF6iHlPX4z0TVf/lb/AIiZtT0aX/7G8hNUUK1p5p0PKDKnkZ6Cp6Or+dvIQH+gL+dvISimhWj5sJYSgMsJ7B5uBVMuDBAy4aABVMIGgA8uHgAcNLhouHlg/WGjDIaczQIadvMAKTOZoK8gaABc0l4MvOZoAHBlgYEGEUzGag6xzDtM5Y1RiMeTVpvDq8RRoVHi4VTNOk8北京排名seo優(yōu)化渠道ZFSZlJ40Hkmiss0fWaSU6kUNW86j3+kXBtNWlUjKvMqlVvrfbfnGkqRGMmOF5wVIsXkzxGNo36ydSoImasvTfpFDTWwzz0WAfunmMM1+H33T0PZwP3r/UI/8AQvKv0NwGK4ptN4ZDF8WdJ2U9k4oX7Hn8c0yK5mnjzrofvumHiXPMTiXs9D4BVm6/CJmt/wDoeUtUc8Yvn+7SqJNnybNOgwd50GeieaEBlwYIGXDQAKGlg0CDLAwAMGlw0BnnVYwAZDTt4ANJeYMHDd0sD97Ra8sp5ffjAA05mgyes5mmgGD北京排名seo優(yōu)化渠道QqvFQfD4QikTGCG0cd3f9BGKdT8o8T8h9YmrqOsIlTiYrHTNBKnUk8z8hDq/2Zmq9+ghg8UdM0EqcbxmnXmYjwiVwNorQ6o1PWy9Orr8Jmipbv/aGStcgybQ6ZqUqntbxj1hGu4mTTra6xhatjpEaHlmh/kXkFWIF9dDY/A+EhqWMXDdNIVL/AH8ozQb+uMw1q843h8VY63t9+cVyMqR6KhUGhvceTD5T0eAqAgXN+8ajvtPEpVKnMhzDcgfMT1fY2LSoLe63Ib/8TFS8hT1HokvbQ3+P8xLGVGXfbnuJcOV北京排名seo優(yōu)化渠道3GnMajyOoieOxBAOU36H5SlVqwhE/tvwY3aRBFwfvunn8S45n5ffjNDHVwbkCx4i9v3nn8S+vFe/T785OUXplqlTrf76RY4jqfMwVWtzF/C/8xc1RyMspIuj5yDO3g7zoM7ThCAy2eBvLAwAJnnQ/K8Ep5CXzc/rAYKGlgxgQ3Iec7m5nwEADgy14JTLrAC1xJnPCVLASZuekALKOesvfwgQ/KWF+MALrLhoLNOipABpDCZvGKI0IHtMGQ6h4nblLCp/EUV5BU4Dzim6OCpGEq8pngwi1OUxjJj1Ora9+Jhl北京排名seo優(yōu)化渠道fKR3zNz6XjNKrde6K0MmaKuLwtNyLA+BmYtS/31jK1dpNodUOl9bX7pX1ttD/AFFGqX0M6HvofAzOoOh3Oe+Xo1sp2uDuOBEz1qlfCM4FldsrHKG2PAHr0g0aqPRYWpks9P20O6E+0v8AtPymzhMbRLAglG4gixHhwnicUlXDtZgRxBGxHAg8Z6LsXtGlWAWoozjZho39SVT8lZrzh7pcaQt7hhb4d/GYPanaCG9rqeXDyPyhFRqQul3Tiv4h1ExO0cTScEg77gj5RVrNxLyjNxOIJJsb28/rEqmK4G468Pv北京排名seo優(yōu)化渠道zlKy21Vgeh+UVq4ph7y35n6/zKzJOqLu/l0/iB05/GCNdT7pseRgjW6Sqkk6PB3nbySS5znc0gbkJJIAWzczLKfsySQAgl1tJJAAgfp5yFyeMkk0CuflIBzkkgBcPJe8kkwCXllkkgBYvLJJJA0IGkLTskwDoeWV7SSTDQqVNIfD1LX75JIrGR1KlmjS1NOkkkUZFzUuJFe+0kkDTnruesqXINxJJMMPT9j9to6iliFzIdATqUJ5dPvvX7Z7OOHYOhuh1VhuOUkkn8lV5Rodl+keZclQm40Vxrfvi/abK1yP北京排名seo優(yōu)化渠道a5g6HvBkkmqVoJtoxbA+65HNW3E49QrodufD+JJI5MXrop1tbqNoCx5ySSgjP/9k="

>更多關(guān)于山月的文章:我的專欄《前端工程化三十八講》免費(fèi)發(fā)布了，附視頻講解、代碼示例三分鐘講解什么是 corejs

Javascript 體積優(yōu)化時(shí)的代碼壓縮原理是什么簡(jiǎn)述 Javascript 的模塊化方案什么是 CICD歡迎掃碼添加山月的微信，備注進(jìn)群，加入山月的前端面試交流群: