如何實現同等間隙的卡片佈局

時間  2019-11-06
標籤 如何 實現 同等 間隙 卡片 佈局 简体版
原文   原文鏈接

在列表展現中，常常會使用卡片的內容展現形式，爲了美觀，經常要求各卡片間的間隙是一致的。css

卡片內容不同可能高度不等，但通常來講爲了總體的一致性，會限制每一個卡片的寬高都相等。html

本文就基於寬高一致的多個卡片，在不一樣屏幕大小下，每行卡片數量可能有調整，考量如何實現等間隙的佈局。app

點我預覽ide

 

放置一張張卡片項，爲了設置間距，最多見的就是直接使用一個特定的margin值了，這種方式雖然能夠（經過精確計算後確實也能夠）佈局

直接設置一個間距，好比統一 margin-left 和 margin-bottom都爲 20px ，並不能保證每行最後一個卡片以後的間距是20pxflex

關於如何定這個 margin的值，須要經過一個規則來計算，這個後文再說明spa

 

設置同等間距，經常使用的還有 flex佈局中的 justify-content: space-between，能夠定義各子項目以相同間距佈局，但很差處理左右子項目與邊框的間距。 space-around這個就更用不得了，會使得左右子項目右margin == 左margin * 2.net

因此最終仍是回到使用margin值來設置，經過一個可用的規則，來保證間距是一致的。設計

 

先把基本結構搭上code

<div class="container">
    <h2>項目列表</h2>
    <ul class="proj-items"></ul>
</div>

<!-- 模板結構 -->
<script type="text/template" id="proj-item-tpl">
    <li class="proj-item">
        <a href="#/p/{{projectID}}">
            <h3 class="proj-item__title">{{projectName}}</h3>
            <p class="proj-item__author">{{author}}</p>
        </a>
    </li>
</script>

JS生成N個項目

        function addEvent(elem, type, handler) {
            elem.addEventListener(type, handler, false);
        }

        function qs(selector) {
            return document.querySelector(selector);
        }

        function qsa(selectors) {
            return document.querySelectorAll(selectors);
        }

        var mockData = (function(num) {
            var data = [];
            
            for (var i = 1; i <= num; ++i) {
                data.push({
                    projectID: i,
                    projectName: '項目' + i,
                    author: '張大大'
                });
            }
            
            return data;
        })(8);
        
        var itemTpl = qs('#proj-item-tpl').innerHTML;
        var itemsDOM = qs('.proj-items');
        
        /**
         * 渲染數據
         * @param  {[type]} data [description]
         * @return {[type]}      [description]
         */
        function renderList(data) {
            var html = '';
            var fragment = document.createDocumentFragment();

            data.forEach(function(item) {
                var divTemp = document.createElement('div');

                // 模板替換
                divTemp.innerHTML = itemTpl.replace(/{{(\w+)}}/g, function(input, match) {
                    return match ? item[match] || '' : '';
                });

                fragment.appendChild(divTemp.firstElementChild);
            });

            // 渲染
            itemsDOM.appendChild(fragment);
        }
       
        renderList(mockData);

把基礎樣式放上，這裏咱們先指定一個特定的itemMargin值爲20px

$itemMargin: 20px;
$itemWidth: 130px;
$itemHeight: 150px;

.container {
    margin: 20px auto;
    width: 450px;
    background-color: #f2f2f2;
    color: #666;
    
    h2 {
        margin: 20px;
        padding-top: 20px;
        font-size: 20px;
    }
}

.proj-items {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    padding: 0;
    list-style: none;
    
    &:after {
        content: "";
        display: block;
        flex-grow: 99999;
    }
}

.proj-item {
    margin-left: $itemMargin;
    margin-bottom: $itemMargin;
    width: $itemWidth;
    height: $itemHeight;
    background-color: #fff;
    border-radius: 3px;
    text-align: center;
    
    &:hover {
        box-shadow: 0 0 20px #ddd;
    }
    
    a {
        display: block;
        padding: 15px;
        height: 100%;
        color: #666;
        text-decoration: none;
    }
    
    &__title {
        margin-top: 0;
        font-size: 16px;
    }
    
    &__author {
        font-size: 12px;
    }
}

 

能夠看到，每行最後一個間距不一致了，因此不能簡單的寫個margin值

再來看看設置 space-between的時候

.proj-items {
    justify-content: space-between;
    ...
}

.proj-item {
    /* margin-left: $itemMargin; */
    margin-bottom: $itemMargin;
    ...
}

 

 看來並不夠強大

若是看得仔細，應該能看到項目7和8是挨在一塊兒的，爲什麼沒有間距呢

其一是由於沒有margin-left值，其二是在項目列表後放了一個坑來佔位，防止最後一行項目過少時 space-between的值太大了

把這個撤掉看看這個影響

    &:after {
        content: "";
        display: block;
        flex-grow: 99999;
    }

 

 

仍是把目光投向margin值的設定規則吧

在設計一個頁面佈局時，至少已經肯定了XX頁面大小的狀況下，容器寬度應該設置爲多少（好比爲1200px），每行放n個項目，項目的寬高是多少

有了這些指標（也必須有這些指標），咱們就能夠用來計算margin值了

containerWidth == n * itemWidth + (n + 1) * itemMargin

得出

itemMargin = (containerWidth - n * itemWidth) / (n + 1)

代入這裏的狀況，containerWidth 450px，itemWidth 130px，每行 3個，便可得出 itemMargin 正好爲 15px 

 

有了某種特定狀況下的佈局規則以後，接下來還要考慮不一樣屏幕大小的狀況下，怎麼調整這個margin值

這個須要結合媒體查詢來設定，同時相應的計算規則也能夠經過scss來處理

第一種狀況是每行3個，n只可能爲整數，便可推算出須要處理的臨界值爲1 2 3 4 5 6 ... 這些整數值

加入n爲4，若是要保證 itemMargin值15px在各類狀況下都相等，計算可得 容器寬度containerWidth值 爲 595px

同理求得 n是5時爲 740px ，n是2時爲 305px

固然，若是以爲這個containerWidth值不太好看，也能夠本身定義，好比 n是4的時候設置爲 600px，代入公式那麼 itemMargin值爲16px。

爲了保證各類請下間距都相等，我我的就不推薦這麼幹了

 

經過上述的規則計算，咱們能夠得出每行項目數量遞增時的容器寬度臨界值。把這些臨界值放在媒體查詢裏面配置，便可方便地實現這種佈局的自適應。

/* 這兩個爲初始就肯定的基準值 */
$containerWidth: 305px;
$itemMargin: 15px;

$itemWidth: 130px;
$itemHeight: 150px;

/* 每行項目數量爲itemNum時的容器寬度 */
@function getContainerWidth($itemNum) {
    @return $itemNum * $itemWidth + ($itemNum + 1) * $itemMargin; 
}

/* 配置各個頁面寬度下的容器寬度（應用） */
@mixin adjustContainerWidth(
    $from: 2,
    $to: 5
) {
    @for $i from $from through $to {
        $minWidth: getContainerWidth($i);
        $maxWidth: getContainerWidth($i + 1);

        @media only screen and (min-width: $minWidth) and (max-width: $maxWidth) {
            .container {
                width: $minWidth;
            }
        }
    }
}

.container {
    margin: 20px auto;
    width: $containerWidth;
    background-color: #f2f2f2;
    color: #666;
    
    h2 {
        margin: 20px;
        padding-top: 20px;
        font-size: 20px;
    }
}

@include adjustContainerWidth(
    $from: 1,
    $to: 7
);

便可實現各個頁面大小下的自適應效果

完整的CSS部分

 1 /* 這兩個爲初始就肯定的基準值 */
 2 $containerWidth: 305px;
 3 $itemMargin: 15px;
 4 
 5 $itemWidth: 130px;
 6 $itemHeight: 150px;
 7 
 8 /* 每行項目數量爲itemNum時的容器寬度 */
 9 @function getContainerWidth($itemNum) {
10     @return $itemNum * $itemWidth + ($itemNum + 1) * $itemMargin; 
11 }
12 
13 /* 配置各個頁面寬度下的容器寬度（應用） */
14 @mixin adjustContainerWidth(
15     $from: 2,
16     $to: 5
17 ) {
18     @for $i from $from through $to {
19         $minWidth: getContainerWidth($i);
20         $maxWidth: getContainerWidth($i + 1);
21 
22         @media only screen and (min-width: $minWidth) and (max-width: $maxWidth) {
23             .container {
24                 width: $minWidth;
25             }
26         }
27     }
28 }
29 
30 .container {
31     margin: 20px auto;
32     width: $containerWidth;
33     background-color: #f2f2f2;
34     color: #666;
35     
36     h2 {
37         margin: 20px;
38         padding-top: 20px;
39         font-size: 20px;
40     }
41 }
42 
43 @include adjustContainerWidth(
44     $from: 1,
45     $to: 7
46 );
47 
48 .proj-items {
49     display: flex;
50     flex-wrap: wrap;
51     padding: 0;
52     list-style: none;
53 }
54 
55 .proj-item {
56     margin-left: $itemMargin;
57     margin-bottom: $itemMargin;
58     width: $itemWidth;
59     height: $itemHeight;
60     background-color: #fff;
61     border-radius: 3px;
62     text-align: center;
63     
64     &:hover {
65         box-shadow: 0 0 20px #ddd;
66     }
67     
68     a {
69         display: block;
70         padding: 15px;
71         height: 100%;
72         color: #666;
73         text-decoration: none;
74     }
75     
76     &__title {
77         margin-top: 0;
78         font-size: 16px;
79     }
80     
81     &__author {
82         font-size: 12px;
83     }
84 }
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程