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>