炎炎設計
2018-12-18 17:15:06
前端瀑布流是老生常談的話題,一般都是固定寬度,新內容不停地追加到最短列,但是百度圖片的瀑布流就不這么簡單了。百度圖片是固定高度,每一行圖片寬度不定,但是都能恰好排滿,而且調整屏幕大小時,圖片整體高度都會跟著變,每一行的圖片個數也會跟著變,厲害了,我的百度,研究半天,沒看出門道。
1 回答

翻翻過去那場雪
TA貢獻2065條經驗 獲得超14個贊
flex布局
<div>
<img/>
<img/>
<img/>
<img/>
<div>
div{
display: flex;/*顯示模式設置為彈性盒子*/
flex-wrap: wrap;/*進行強制換行*/
}
div:after{
/*對最后一個偽元素進行最大限度伸縮*/
content: ' ';
flex-grow: 999999999999999999999999999999999999;
}
img{
height: 200px;/*高度*/
width: auto;
margin: 2px;
flex-grow: 1;/*進行按比例伸縮*/
object-fit: cover;/*進行裁切,并且圖片按比例縮放*/
}
添加回答
舉報
0/150
提交
取消