uniapp使用css实现瀑布流
页面
{{item.title}}
{{item.author}}
{{item.like}}
Page{
background-color: aliceblue;
padding-bottom: 100rpx;
}
.list {
padding: 10rpx;
column-count: 2;
box-sizing:content-box;
padding-right: 30rpx;
}
.pbl{
width: 360rpx;
break-inside: avoid;
overflow: hidden;
border-radius: 10px;
overflow: hidden;
margin-bottom: 20rpx;
background-color: #fff;
padding: 0 10rpx;
box-sizing: border-box;
&:last-child{
margin-bottom: 10rpx;
}
.image{
width: 100%;
border-radius: 12rpx;
overflow: hidden;
margin-top: 8rpx;
&>image{
width: 100%;
height: 100%;
}
}
.title{
font-size: 30rpx;
margin-bottom: 6rpx;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;//当属性值为3,表示超出3行隐
}
.more{
display: flex;
justify-content: space-between;
color: #9499aa;
margin-bottom: 6rpx;
font-size: 26rpx;
}
}