html无规律卡片布局,如何实现同等间隙的卡片布局
在列表展示中,经常会使用卡片的内容展示形式,为了美观,常常要求各卡片间的间隙是一致的。
卡片内容不一样可能高度不等,但一般来说为了整体的一致性,会限制每个卡片的宽高都相等。
本文就基于宽高一致的多个卡片,在不同屏幕大小下,每行卡片数量可能有调整,考量如何实现等间隙的布局。
放置一张张卡片项,为了设置间距,最常见的就是直接使用一个特定的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: '张大大'
});
}
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
html无规律卡片布局,如何实现同等间隙的卡片布局相关推荐
- java怎么设置卡片布局_在Java中使用卡片布局管理器的方法
在Java中使用卡片布局管理器的方法 发布时间:2020-12-03 16:05:18 来源:亿速云 阅读:85 作者:Leah 在Java中使用卡片布局管理器的方法?针对这个问题,这篇文章详细介绍了 ...
- flowlayout java_Java图形化界面设计——布局管理器之FlowLayout(流式布局)
前文讲解了JFrame.JPanel,其中已经涉及到了空布局的使用.Java虽然可以以像素为单位对组件进行精确的定位,但是其在不同的系统中将会有一定的显示差异,使得显示效果不尽相同,为此java提供了 ...
- java swt 布局管理器_JAVA.SWT/JFace: SWT布局管理器
7.1 布局管理器概述 FillLayout(充满式布局):在单行或单列中放置相同大小的控件,是最简单的布局. RowLayout(行列式布局):在单行或者多行中放置控件,应用了fill.wrap和s ...
- html图片文字 网格布局,【图片版】CSS网格布局(Grid)完全教程
## 简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Ha ...
- 从上往下 流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念 最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
- python布局管理_PyQt5每天必学之布局管理
这篇文章主要为大家详细介绍了PyQt5每天必学之布局管理的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在GUI编程中有一个不容忽视的部分,那就是布局管理.布局管理掌控着我们的控件在应用 ...
- html三列布局中间固定,常见的三列布局(左右固定宽度,中间自适应)
实现css中的三列布局,左右固定宽度,中间自适应.三列布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变.比较常见的实现方案是:定位,浮动,css3中新特性flex布局,以及流 ...
- 计算机设备布局图,针对不同设备类型创建仪表板布局
仪表板可以包括屏幕大小各异的不同类型的设备的布局.将这些布局发布到 Tableau Server 或 Tableau Online 时,查看仪表板的用户将体验到专门针对其手机.平板电脑或台式机优化的设 ...
- 【Android 性能优化】布局渲染优化 ( CPU 渲染优化 | 减少布局的嵌套 | 测量布局绘制时间 | OnFrameMetricsAvailableListener | 布局渲染优化总结 )
文章目录 一. 减少布局嵌套 二. 布局渲染时间测量 1. FrameMetrics 使用流程 2. FrameMetrics 参数解析 3. FrameMetrics 代码示例 三. 布局渲染优化总 ...
最新文章
- cs oracle语句跟踪,Oracle执行语句跟踪 使用sql trace实现语句追踪
- 读《高效程序员的45个习惯——敏捷开发修炼之道》
- UVa1418 - WonderTeam(构造法)
- 将jsp页面转化为图片或pdf(一)(qq:2798641729)
- window上安装mysql_在window上安装mysql - MySQL5.7.24 版本
- unifig,是以基于 SpringCloud 的一个分布式 微服务 平台
- Android倒计时案例展示
- 一起谈.NET技术,浅析五大ASP.NET数据控件
- Perl 学习笔记-目标操作
- 通用计算机dsp采用,一种基于FPGA+DSP的通用飞控计算机平台设计
- 三相桥式全控整流电路simulink仿真_维修电工高级仿真-教学软件
- shp文件转json
- 整车控制器(VCU/HCU)开发咨询服务
- [LeetCode刷题] 476. 数字的补数--Java实现
- Linux中启动Steam报错libGL error的解决办法
- 怎样把pdf格式转换成jpg
- 最有效的赚钱方法,只有100元如何赚到10万?
- 公寓这个大坑,劝大家不要再跳了
- python代码画乌龟_python画乌龟
- 微信开发——网页授权