1.column 多行布局实现瀑布流
column 实现瀑布流主要依赖两个属性。
一个是 column-count 属性,是分为多少列。
一个是 column-gap 属性,是设置列与列之间的距离。
<style>
.box {
margin: 10px;
column-count: 3;
column-gap: 10px;
}
.item {
margin-bottom: 10px;
}
.item img{
width: 100%;
height:100%;
}
</style>
<body>
<div class="box">
<div class="item">
<img src="1.jpg" alt="" />
</div>
<div class="item">
<img src="2.jpg" alt="" />
</div>
</div>
</body>
2.flex 弹性布局实现瀑布流
flex 实现瀑布流需要将最外层元素设置为 display: flex,即横向排列。然后通过设置 flex-flow:column wrap 使其换行。设置 height: 100vh 填充屏幕的高度,来容纳子元素。每一列的宽度可用 calc 函数来设置,即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。
<style>
.box {
display: flex;
flex-flow:column wrap;
height: 100vh;
}
.item {
margin: 10px;
width: calc(100%/3 - 20px);
}
.item img{
width: 100%;
height:100%;
}
</style>
<body>
<div class="box">
<div class="item">
<img src="1.jpg" alt="" />
</div>
<div class="item">
<img src="2.jpg" alt="" />
</div>
</div>
</body>