两行css 实现瀑布流

html

<ul ><li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li><li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li><li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li><li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li><li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li><li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li><li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li></ul>

 css

ul{ width: 100%;columns: 5;column-gap: 10px;}
ul>li{break-inside: avoid;margin-bottom: 10px; }

效果：