1. 瀑布流布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>瀑布流布局</title> <style> .waterfall { width: 300px; column-count: 2; } .item { flex:none; } .item img{ width: 100%; } </style></head><body> <ul class="waterfall"> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.17moban.com%2Fuploads%2Fallimg%2F141213%2F1-1412132205410-L.jpg&refer=http%3A%2F%2Fwww.17moban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=2d33fbaa87a7581aff2a97ecfb77b91e" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.zbjimg.com%2Fservice%2F2016-05%2F26%2Fservice%2F5746e4ad9cef5.jpg&refer=http%3A%2F%2Fp6.zbjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164342&t=a4079c42596491178b648289f2a443b6" alt=""> </li> <li class="item"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimages2017.cnblogs.com%2Fblog%2F918206%2F201709%2F918206-20170905104716241-1509851927.png&refer=http%3A%2F%2Fimages2017.cnblogs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622164359&t=ca84c4b20e0ad2a8e16c60489f032e83" alt=""> </li> </ul></body></html>2. 解决column-count引起的内容割裂bug
容器内加上款式
break-inside: avoid;