問題展現
.waterfall{
padding: .2rem .28rem;
column-count: 2; //顯示兩列
column-gap: normal; //列間距
}
.waterfall .item{
width: 3.2rem;
overflow:hidden;
box-sizing: border-box;
break-inside: avoid; //列裏面的項不折斷
margin-bottom:.19rem;
}
.waterfall .item-content{
background:rgba(255,255,255,1);
border-radius:.08rem;
box-shadow:0px .04rem .16rem 0 rgba(0, 0, 0, 0.04);
}
.waterfall .item-pic{
position:relative;
width:3.20rem;
overflow: hidden;
}
<div class="waterfall">
<div class="item" tapmode @click="openDetailWin(item.topicId)" v-for="(item,index) in list" @key="index">
<div class="item-content">
<div class="item-pic">
<img v-if="item.imageUrl1" :src="imgSrc+item.imageUrl1">
<img v-else src="../../image/error_img.png">
</div>
<div class="item-padded">
<div class="item-title">{{item.topicTitle}}</div>
<div class="item-desc">{{item.topicContent}}</div>
<div class="item-small tf-flex tf-flex-between tf-margin-t-10">
<span>{{item.commentCount}}評論 {{item.likeCount}}贊</span>
<span>{{func.time2desc(item.addTime)}}</span>
</div>
</div>
</div>
</div>
</div>
找了半天,發現是 item 的 margin-bottom 導致的:第一列的最後一個item的margin-bottom跑到第二列第一個item上面了,改成padding-bottom即可,因爲padding屬於內容,只要不折斷,就不會跑到另一列
轉載地址:http://www.5imoban.net/jiaocheng/CSS3_HTML5/2018/1129/3491.html