css 瀑布流

FlexBox版本瀑布流

给你们展示一下我超强的画工,跟你们表达一下瀑布流的布局

如果你不懂Flex布局,那就直接copy代码, 简单粗暴

<div class="IndexBox"> <div class="itemBox"> <div class="item"> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=163808881,4116372357&fm=26&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1705581946,4177791147&fm=26&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2709747480,3075217881&fm=26&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=824689201,906964956&fm=26&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg" alt="" /> </div> </div> <div class="itemBox"> <div class="item"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1705581946,4177791147&fm=26&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2709747480,3075217881&fm=26&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3205631169,114798947&fm=15&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=824689201,906964956&fm=26&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg" alt="" /> </div> </div> <div class="itemBox"> <div class="item"> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3205631169,114798947&fm=15&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=824689201,906964956&fm=26&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2151687143,2821671371&fm=26&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1830914723,3154965800&fm=26&gp=0.jpg" alt="" /> </div> <div class="item"> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1177110542,2551344174&fm=26&gp=0.jpg" alt="" /> </div> </div> </div> <style> .IndexBox{ display:flex; } .itemBox{ display:flex; flex-direction:column, width: calc(100% / 3); //每一列占3分之一,具体自己计算自己需要的宽度,也可以用 flex:1,表示均分 } .item{ margin-bottom: 15px; } </style>