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

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

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

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

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

關(guān)于如何定這個(gè) margin的值，需要通過(guò)一個(gè)規(guī)則來(lái)計(jì)算，這個(gè)后文再說(shuō)明

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

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

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

項(xiàng)目列表

{{projectname}}

{{author}}

js生成n個(gè)項(xiàng)目

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: '項(xiàng)目' + 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ǔ)樣式放上，這里我們先指定一個(gè)特定的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;

}

}

可以看到，每行最后一個(gè)間距不一致了，所以不能簡(jiǎn)單的寫(xiě)個(gè)margin值

再來(lái)看看設(shè)置 space-between的時(shí)候

.proj-items {

justify-content: space-between;

...

}

.proj-item {

/* margin-left: $itemmargin; */

margin-bottom: $itemmargin;

...

}

看來(lái)并不夠強(qiáng)大

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

其一是因?yàn)闆](méi)有margin-left值，其二是在項(xiàng)目列表后放了一個(gè)坑來(lái)占位，防止最后一行項(xiàng)目過(guò)少時(shí) space-between的值太大了

把這個(gè)撤掉看看這個(gè)影響

&:after {

content: "";

display: block;

flex-grow: 99999;

}

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

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

有了這些指標(biāo)(也必須有這些指標(biāo))，我們就可以用來(lái)計(jì)算margin值了

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

得出

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

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

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

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

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

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

同理求得 n是5時(shí)為 740px ，n是2時(shí)為 305px

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

為了保證各種請(qǐng)下間距都相等，我個(gè)人就不推薦這么干了

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

/* 這兩個(gè)為初始就確定的基準(zhǔn)值 */

$containerwidth: 305px;

$itemmargin: 15px;

$itemwidth: 130px;

$itemheight: 150px;

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

@function getcontainerwidth($itemnum) {

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

}

/* 配置各個(gè)頁(yè)面寬度下的容器寬度(應(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

);

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

完整的css部分

1 /* 這兩個(gè)為初始就確定的基準(zhǔn)值 */

2 $containerwidth: 305px;

3 $itemmargin: 15px;

4

5 $itemwidth: 130px;

6 $itemheight: 150px;

7

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

9 @function getcontainerwidth($itemnum) {

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

11 }

12

13 /* 配置各個(gè)頁(yè)面寬度下的容器寬度(應(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无规律卡片布局,如何实现同等间隙的卡片布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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