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

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

本文就基于寬高一致的多個卡片，在不同屏幕大小下，每行卡片數(shù)量可能有調(diào)整，考量如何實現(xiàn)等間隙的布局。

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

直接設(shè)置一個間距，比如統(tǒng)一 margin-left 和 margin-bottom都為 20px ，并不能保證每行最后一個卡片之后的間距是20px

關(guān)于如何定這個 margin的值，需要通過一個規(guī)則來計算，這個后文再說明

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

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

先把基本結(jié)構(gòu)搭上

項目列表

{{projectname}}

{{author}}

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

/**

* 渲染數(shù)據(jù)

* @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);

把基礎(chǔ)樣式放上，這里我們先指定一個特定的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值

再來看看設(shè)置 space-between的時候

.proj-items {

justify-content: space-between;

...

}

.proj-item {

/* margin-left: $itemmargin; */

margin-bottom: $itemmargin;

...

}

看來并不夠強大

如果看得仔細，應(yīng)該能看到項目7和8是挨在一起的，為何沒有間距呢

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

把這個撤掉看看這個影響

&:after {

content: "";

display: block;

flex-grow: 99999;

}

還是把目光投向margin值的設(shè)定規(guī)則吧

在設(shè)計一個頁面布局時，至少已經(jīng)確定了xx頁面大小的情況下，容器寬度應(yīng)該設(shè)置為多少(比如為1200px)，每行放n個項目，項目的寬高是多少

有了這些指標(也必須有這些指標)，我們就可以用來計算margin值了

containerwidth == n * itemwidth + (n + 1) * itemmargin

得出

itemmargin = (containerwidth - n * itemwidth) / (n + 1)

代入這里的情況，containerwidth 450px，itemwidth 130px，每行 3個，即可得出 itemmargin 正好為 15px

有了某種特定情況下的布局規(guī)則之后，接下來還要考慮不同屏幕大小的情況下，怎么調(diào)整這個margin值

這個需要結(jié)合媒體查詢來設(shè)定，同時相應(yīng)的計算規(guī)則也可以通過scss來處理

第一種情況是每行3個，n只可能為整數(shù)，即可推算出需要處理的臨界值為1 2 3 4 5 6 ... 這些整數(shù)值

加入n為4，如果要保證 itemmargin值15px在各種情況下都相等，計算可得 容器寬度containerwidth值 為 595px

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

當然，如果覺得這個containerwidth值不太好看，也可以自己定義，比如 n是4的時候設(shè)置為 600px，代入公式那么 itemmargin值為16px。

為了保證各種請下間距都相等，我個人就不推薦這么干了

通過上述的規(guī)則計算，我們可以得出每行項目數(shù)量遞增時的容器寬度臨界值。把這些臨界值放在媒體查詢里面配置，即可方便地實現(xiàn)這種布局的自適應(yīng)。

/* 這兩個為初始就確定的基準值 */

$containerwidth: 305px;

$itemmargin: 15px;

$itemwidth: 130px;

$itemheight: 150px;

/* 每行項目數(shù)量為itemnum時的容器寬度 */

@function getcontainerwidth($itemnum) {

@return $itemnum * $itemwidth + ($itemnum + 1) * $itemmargin;

}

/* 配置各個頁面寬度下的容器寬度(應(yīng)用) */

@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

);

即可實現(xiàn)各個頁面大小下的自適應(yīng)效果

完整的css部分

1 /* 這兩個為初始就確定的基準值 */

2 $containerwidth: 305px;

3 $itemmargin: 15px;

4

5 $itemwidth: 130px;

6 $itemheight: 150px;

7

8 /* 每行項目數(shù)量為itemnum時的容器寬度 */

9 @function getcontainerwidth($itemnum) {

10 @return $itemnum * $itemwidth + ($itemnum + 1) * $itemmargin;

11 }

12

13 /* 配置各個頁面寬度下的容器寬度(應(yīng)用) */

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

總結(jié)

以上是生活随笔為你收集整理的html无规律卡片布局,如何实现同等间隙的卡片布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。