在前端开发中，布局是开发者必须要面对的问题之一。当我们需要展示一列等高的可滚动元素时，我们往往会使用砌块布局。@material2-extra/masonry 是一款基于 Angular Material 的砌块布局组件，它能够让我们轻松地实现等高的可滚动元素效果，并且兼容各种设备以及浏览器。
安装
在使用 @material2-extra/masonry 之前，需要先安装相关的依赖包：
npm install --save @angular/cdk @angular/material @material2-extra/masonry
使用
- 导入
MatMasonryModule
为了使用 @material2-extra/masonry，我们需要先在 app.module.ts 中导入 MatMasonryModule：
-- -------------------- ---- -------
------ - ---------------- - ---- ---------------------------
-----------
---
-------- -
---
----------------
--
---
--
------ ----- --------- - -- 添加 HTML 模板
添加 HTML 模板，并使用 mat-masonry 元素包裹砌块子元素：
<mat-masonry [gutterSize]="16"> <div matMasonryTile>Tile 1</div> <div matMasonryTile>Tile 2</div> <div matMasonryTile>Tile 3</div> ... </mat-masonry>
- 添加 CSS 样式
为砌块子元素添加样式：
-- -------------------- ---- ------- ----------- - ------- - ----- ---------- ------- - ----------- - --- - ----------------- -------- -------------- ---- ----------- --- --- --- ------- -- -- ----- ------ ----- -------- ----- ---------------- ------- ------------ ------- ---------- ----- -
参数
gutterSize：用于设置砌块子元素的间距大小，默认值为 8px。
示例代码
HTML 模板：
<mat-masonry [gutterSize]="16"> <div matMasonryTile>Tile 1</div> <div matMasonryTile>Tile 2</div> <div matMasonryTile>Tile 3</div> ... </mat-masonry>
CSS 样式：
-- -------------------- ---- ------- ----------- - ------- - ----- ---------- ------- - ----------- - --- - ----------------- -------- -------------- ---- ----------- --- --- --- ------- -- -- ----- ------ ----- -------- ----- ---------------- ------- ------------ ------- ---------- ----- -
学习与指导意义
通过学习 @material2-extra/masonry 的使用，我们可以轻松地实现等高的可滚动元素效果，并且在不同的设备和浏览器上具有良好的兼容性。同时，我们还可以根据自己的需求对砌块子元素进行定制化的样式调整，以满足不同的业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446cd