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

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

卡片內容不一樣可能高度不等，但一般來說為了整體的一致性，會限制每個卡片的寬高都相等。

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

點我預覽

放置一張張卡片項，為了設置間距，最常見的就是直接使用一個特定的margin值了，這種方式雖然可以（通過精確計算後確實也可以）

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

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

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

所以最終還是回到使用margin值來設置，通過一個可用的規則，來保證間距是一致的。

先把基本結構搭上

<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;