实践练习1：瀑布流（栅布局）

川长思鸟来 2022-10-01 10:00 115阅读 0赞

## 目标： ##

*  使用grid来建立页面栅布局
 *  不指定元素以及容器的高度，容器内部所有元素都能够自适应大小，并且自动排列
 *  元素两侧的空白是均匀的。

--------------------

## 主要部分： ##

#### 一） \#grid容器： ####

display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));    /* 1 */
    grid-auto-rows: 5px;               /* 2 */
    grid-auto-flow: row dense;		   /* 3 row dense会填充空白 */
    grid-gap:23px;		              /* 4 */
    复制代码

1.  设置列的宽度为最小为280px；其重复次数自适应（使用auto-fit，抑或auto-fill关键字）
2.  栅中，行高固定为5px
3.  使用grid-auto-flow来设置元素的排列方式，即按水平方向布局，在有必要时才会发生换行。
4.  设置网格的周围距离。

#### 二） .grid-item 网格项目 ####

grid-column: auto / span 1;      /* 1 */
    position: relative;            
    复制代码

此处使用grid-column来固定元素的列跨度， / 的左侧是列的起点，右侧是列跨度。 注意：网格项目的行跨度会在脚本中设置。

#### 三） 网格项目的高度（即行跨度） ####

var h = Math.floor(height / 5) % 23; /* 重点在%23 */
    el.style.gridRow = 'auto / span ' + (h>=7?h:h+7) ;
    复制代码

height是随机高度；h则是根据height生成的span数。

在以上CSS中，使用grid-auto-rows定义了行高，grid-gap定义了网格之间的间距； 那么就能得到： 元素实际高度 = h \* grid-auto-rows + (h-1) \* grid-gap。 首先，将元素实际高度限制在170px到590px之间，就能得到h的范围是 7 - 22 .

在上面的代码中， %23保证了h必须是22以内的整数。 而(h>=7?h:h+7)则保证了h必须要大于或等于7.

## 预览： ##

##### 1： #####

##### 2： #####

## 写在最后： ##

*  这是小生系统学习前端知识后的一些实践练习，其中大多是自己的理解，还请各位批评指正。
 *  完整的代码链接（Codepen）： [P1瀑布流][P1]

转载于:https://juejin.im/post/5ccaea57e51d453b4558d824

[P1]: https://link.juejin.im?target=https%3A%2F%2Fcodepen.io%2Fkrfwill%2Fpen%2FKYOdoR