html 卡片布局 怎么,实现同等间隙卡片布局的方法介绍

本篇文章给大家介绍一下实现同等间隙卡片布局的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

在列表展示中，经常会使用卡片的内容展示形式，为了美观，常常要求各卡片间的间隙是一致的。

卡片内容不一样可能高度不等，但一般来说为了整体的一致性，会限制每个卡片的宽高都相等。

本文就基于宽高一致的多个卡片，在不同屏幕大小下，每行卡片数量可能有调整，考量如何实现等间隙的布局。预览地址：http://jsfiddle.net/khLnajfv/

放置一张张卡片项，为了设置间距，最常见的就是直接使用一个特定的margin值了，这种方式虽然可以(通过精确计算后确实也可以)

直接设置一个间距，比如统一 margin-left 和 margin-bottom都为 20px ，并不能保证每行最后一个卡片之后的间距是20px

关于如何定这个 margin的值，需要通过一个规则来计算，这个后文再说明

设置同等间距，常用的还有 flex布局中的 justify-content: space-between，可以定义各子项目以相同间距布局，但不好处理左右子项目与边框的间距。 space-around这个就更用不得了，会使得左右子项目右margin == 左margin * 2

所以最终还是回到使用margin值来设置，通过一个可用的规则，来保证间距是一致的。

先把基本结构搭上

{{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: '张大大'