几种常见的布局场景

1. 瀑布流布局(瀑布流式布局)

特点：参差不齐的排列形式，布局的元素等宽，当元素占满一行时，后续布局的元素顺次搁置在最小高度的列上，父容器的高度取列表的最大值

布局成果:

js实现

实现思路：
(1) 计算须要布局的列数：文档宽度/图片宽度(outerWidth等)
(2) 创立一个数组（长度为列数），数组元素为每一列已布局元素的总高度
(3) 将未安排的元素，顺次安排到高度最小的那一列，而后更新这一列的高度

tips:

  • 浏览器窗口尺寸变动时，将图片重新排列
  • 图片尺寸计算时留神maigin、border等属性

css实现

css布局无奈实现真正意义上的瀑布流布局
  1. flex布局
    次要实现思路：
    容器元素设置横向布局，子元素设置纵向布局
  2. grid布局
    次要实现思路：
    网格容器：
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200, 1fr));
    grid-gap: 10px;
    grid-auto-flow: row dense;
    grid-auto-rows: auto;
    网格我的项目：grid-row: 2; (跨域几个网格)
  3. Multi-columns布局(多列布局、分栏布局)
    次要实现思路：
    容器元素设置以下属性：
    column-count: 3;
    column-width: 240px;
    column-gap: 20px;
    子元素设置: break-inside: aviod;

瀑布流布局的长处：

  • 升高页面复杂度，节俭空间
  • 联合懒加载，加强用户体验感，应用js实现

2. 程度垂直居中

(1)
.parent{display:table-cell; vertical-align:middle; text-align:center;}
.child{display:inline-block;}
(2) 相对定位
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
(3) flex
.parent{display:flex;justify-content:center;align-items:center;}

3. div实现高度依据宽度自适应

// 以宽高1：1为例(1) padding实现padding-bottom: 50%; // 高低内边距与左右内边距统一，百分数会绝对于父元素宽度设置height: 0;width: 50%;(2)vw实现width: 50vw;height: 50vw;(3)js实现(不举荐)div{width:50%;}window.onresize = () => {div.height(div.width);}(4)zoom实现(ie专属)width: 50%;zoom: 1;(5) float实现

几种罕用的布局形式

a. 响应式布局

  • meta标签
<meta      name="viewport"      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"    />
  • 媒体查问

b. rem布局

挪动端实现自适应所有分辨率

c. 流式布局

百分比布局

d. flex布局

e. grid布局

grid布局与弹性布局的比拟:

  • grid布局基于二维实现，flex布局基于一维布局（只按行或者按列布局）
  • grid布局从布局动手（元素内容依照网格排列主动搁置），flex布局从内容动手（内容大小决定元素占用的空间）

图片素材
Grid布局