iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

初探前端之路-React-由生到死的踩地雷系列 第 3

瀑布流(Masonry layout)卡片排版

前言

經典的排版設計,最近需要刻瀑布式卡片設計,目前還在調教中...

CSS 樣式

我是用styled-components 撰寫 所以看起來有點不一樣,但是在閱讀上還是OK的

MasonryVertical

整個卡片外部的容器,這邊設定的是響應式的判斷

@media 去偵測瀏覽器頁面的長寬,2; 當min-width小於特定px就會更換欄位數column-count

MasonryVerticalBrick

這是內部 卡片的包住的欄位,[box-sizing](http://www.wibibi.com/info.php?tid=CSS3_box-sizing_%E5%B1%AC%E6%80%A7)

CSS3 box-sizing 屬性的功能是用來調整區塊的內距與邊框計算方式,預設的 DIV 區塊的邊框最外的寬度,會因為內距 padding 的值以及邊框 border 的粗細而有所影響,常見的情況是設計師調整了 padding 或邊框的粗細,導致整個 DIV 區塊的寬度改變,輕則影響到美觀,重則影響到整個網頁的排版,有了 CSS3 box-sizing 屬性,網頁設計師可以自己控制 DIV 區塊邊框的計算方式,改善寬度跑掉的問題。
用於調整padding設定完的跑版

Card

單純的React-Semantic-Ui Card

因為他預設卡片高度是適應圖片高度,所以本身卡片就提供不等高的效果,只是他卡片的排版要像瀑布流卡片排列的話
要自己刻,排列的程式碼

const MasonryVertical = styled.div`
      column-count: 1; // 一直排
  column-gap: 10px;
  @media screen and (min-width: 850px) {
    column-count: 2;  // 兩欄直排
  }
  @media screen and (min-width: 1070px) {
    column-count: 3;
  }
  @media screen and (min-width: 1100px) {
    column-count: 3;
    column-gap: 10px;
  }
  @media screen and (min-width: 1800px) {
    column-count: 4;
    column-gap: 10px;
  }
`;

const MasonryVerticalBrick = styled.div`
  box-sizing: border-box;
  padding: 10px;
`;

...略

render(){
    return(
        <MasonryVertical>
            <MasonryVerticalBrick>
                <Card/>
            </MasonryVerticalBrick>
            <MasonryVerticalBrick>
                <Card/>
            </MasonryVerticalBrick>
                ...略
            <MasonryVerticalBrick>
                <Card/>
            </MasonryVerticalBrick><MasonryVerticalBrick>
                <Card/>
            </MasonryVerticalBrick>
        
        <MasonryVertical>
    )

}


結尾

網路上有很多做作法,我做的算是很簡陋的,只能先求有再改進了
參考


上一篇
組件間通訊 this.state this.props refs
下一篇
與APi 失聯 404 notFound 頁面跳轉製作
系列文
初探前端之路-React-由生到死的踩地雷10

尚未有邦友留言

立即登入留言