1.什么是瀑布流
视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。
2.html代码
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
3.css代码
<style>
.wrapper {
display: flex;
/* 改变主轴方向 换行 */
flex-flow: column wrap;
width: 80%;
height: 600px;
/* 居中 */
margin:0 auto;
background-color: antiquewhite;
}
.wrapper .item {
width: 100px;
background-color:#2c6fdb;
margin: 0 20px 20px 0;
font-size: 2rem;
}
.item:nth-child(1)
{
height: 260px;
}
.item:nth-child(2)
{
height: 220px;
}
.item:nth-child(3)
{
height: 150px;
}
.item:nth-child(4)
{
height: 70px;
}
.item:nth-child(5)
{
height: 200px;
}
.item:nth-child(6)
{
height: 160px;
}
.item:nth-child(7)
{
height: 200px;
}
</style>