@ appnest/ masonry- layout (英语)
一个高效而快的网络组件,可以给你一个美丽的砖瓦布局
来这里看演示 https://appnest-demo.firebaseapp.com/masonry-layout 页面存档备份,存于互联网档案馆。 。 。 .
- 简单 : 在盒子里工作(加入你的标记)
- 轻量级: 超小(1kb 微调和gziped)
- 零依赖性 : 创建时只使用 vanilla js - 没有依赖性和框架不可知性 !
- 自定义 : 几乎可以自定义一切(如列,过渡,间隙).
- 方便用户 : 在添加网格大小变化或新元素时自动重新分配项目
- 表演者: 高效快 - 牢记性能的构建( F)
* 安装
npm i @appnest/masonry-layout
如果你喜欢使用 umd 捆绑可以装入 https://unpkg.com/@appnest/masonry-layout/umd/masonry-layout.min.js 换句话说.
示例
导入 @appnest/masonry-layout 在你的代码中某个地方 你准备去! 简单添加 masonry-layout 元素为您的 html 然后在开始和关闭标记之间添加您的元素.
<masonry-layout>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</masonry-layout>
QQ 自定义
通过应用属性自定义功能.
列数
这个 cols 属性指定列的数量。 默认值为 auto 它确保根据可用的宽度分配元素.
<masonry-layout cols="5">
...
</masonry-layout>
列和行之间的间隔
这个 gap 属性指定元素间相差的像素。 默认值为 24px。 。 。 .
<masonry-layout gap="50">
...
</masonry-layout>
最大列宽度
这个 maxcolwidth 指定一个列的最大像素数,当 cols 属性设置为 auto。默认值是 400px。 。 。 .
<masonry-layout maxcolwidth="200">
...
</masonry-layout>
更改卸出时间
这个 debounce 属性指定了以 ms 为单位的时间量,布局的回流每次在瓦砾布局的大小变化时会解除。 这种回流被解开,以避免排版算法被连续引用过多次. 默认值为 300ms。 。 。 .
<masonry-layout debounce="500">
...
</masonry-layout>
• 触发布局
如果你想强迫布局可以调用 layout() 函数.
document.querySelector("masonry-layout").layout();
如果您想要解开布局, 您可以使用 scheduleLayout() 函数代替.
document.querySelector("masonry-layout").scheduleLayout();
* 概览
以下是元素的完整概述.
砖瓦铺设
共济会布局网页组件. 它把时间档元素置于最佳位置 在现有的垂直空间上, 就像泥瓦匠在墙上装了石头.
示例
<masonry-layout><div class="item"></div><div class="item"></div></masonry-layout>
属性
| 财产 | 属性 | 类型 | 说明 |
|---|---|---|---|
cols | cols | number | "auto" | 柱数. |
debounce | debounce | number | 元素调整大小时的去弹出分数. |
gap | gap | number | 列之间的像素差距. |
layout | |||
maxColWidth | maxcolwidth | number | 每个列的最大宽度, 如果设置为自动 . |
onResize | |||
onSlotChange |
方法
| 方法 | 类型 | 说明 |
|---|---|---|
layout | (): void | 排列元素. |
onResize | (entries?: object | undefined): void | 每次元素大小调整,我们需要安排一个布局 如果可用列的数量已经改变. |
onSlotChange | (): void | |
renderCols | (colCount: number): void | 折射出 X 个数列 . |
scheduleLayout | (ms?: number): void | 计划布局. |
槽数
| 名称 | 说明 |
|---|---|
| 应当以布局分配的项目. |
CSS 阴影部件
| 编 | 说明 |
|---|---|
column | 石器布局每栏. |
column-index | 给定索引中的特定一栏(例如一栏-0将针对一栏等) |
QQ 支持旧浏览器
如果您要支持不支持的更老浏览器 自定义元素, (中文(简体) ), 阴影多姆 或者说 调整观察员的大小 您应该填充功能。 通过使用 精彩的花花公子服务。可以在代码一行中添加以下内容: index.html 在导入前 masonry-layout。 。 。 .
<script crossorigin src="https://polyfill.app/api/polyfill?features=es,template,shadow-dom,custom-elements,resizeobserver"></script>
许可证
许可证根据 麻省理工学院。 。 。 .