@egjs/无限网格
演示 编号 : 文档 编号 : 
其他构成部分
一个模块,用于无限地按照网格类型排列包含内容的元素. 使用此模块,您可以执行由大小不同的卡片元素所组成的各种网格. 它通过保持模块在任何情况下处理的DOMS的数量来保证性能
📱💻🖥
支持的框架
* 特性
- 在你喜欢的框架里使用它.
- 我们支持所有主要的JS框架,如反应、Vue、Angular
- 恢复状态, 如位置和活动的幻灯片 持续
- 支持桌面和移动
- 支持动态选项
- 丰富的 API
文章
* 安装
无
$ npm install --save @egjs/infinitegrid
光盘N
- jsDelivr:https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/ (中文(简体) )
- https://unpkg.com/@egjs/infinitegrid/dist/ 互联网档案馆的存檔,存档日期2013-12-21
- cdnjs: (中文(简体) ) https://cdnjs.com/librarys/egjs-infinitegrid 页面存档备份,存于互联网档案馆
QQ 快速启动
HTML 语言
<div class="container"></div>
ES 模块
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
const ig = new MasonryInfiniteGrid(".container", { gap: 5 });
带CDN
<!-- Packaged with all dependencies -->
<!-- https://naver.github.io/egjs-infinitegrid/release/latest/dist/infinitegrid.min.js -->
<script src="https://unpkg.com/@egjs/infinitegrid/dist/infinitegrid.min.js"></script>
var ig = new InfiniteGrid.MasonryInfiniteGrid(".container", { gap: 5 });
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
function getItems(nextGroupKey, count) {
const nextItems = [];
for (let i = 0; i < count; ++i) {
const num = nextGroupKey * count + i;
nextItems.push(`<div class="item"></div>`);
}
return nextItems;
}
const ig = new MasonryInfiniteGrid(".container", {
gap: 5,
});
ig.on("requestAppend", (e) => {
const nextGroupKey = (+e.groupKey || 0) + 1;
ig.append(getItems(nextGroupKey, 10), nextGroupKey);
});
ig.renderItems();
使用更快的懒惰渲染( L)
- 当
loading="lazy"或者说data-grid-lazy="true"使用(外部懒惰加载)属性,立即对物品进行渲染. 当物品被装入时,它们依次被制成.
<img src="..." />
<img src="..." />
<img src="..." loading="lazy" />
<img data-grid-lazy="true" />
- 如果您使用
data-grid-width财务报告和审定财务报表data-grid-height属性、自我大小、子图像和视频元素自动调整,直到装入完成.
<div data-grid-width="100" data-grid-height="100">
<img src="..." />
<img src="..." />
<img src="..." />
</div>
- 如果您使用
data-grid-skip="true"属性,即使存在图像本身和孩子图像,以及视频元素,也可以省略.
<div data-grid-skip="true">
<img src="..." />
<img src="..." />
<img src="..." />
</div>
检测集装箱和儿童的尺寸变化
InfiniteGrid通过窗口再大小事件计算出容器和儿童的大小. 然而,即使窗口的大小没有变化,事件容器和孩子的大小也会有变化. 最早的渲染问题大多也是这样.
在这种情况下,我建议 调整观察员的大小 给你的.
提供 useResizeObserver 用于检测容器大小变化的选项 observeChildren 选项以检测儿童的大小变化.
import { MasonryInfiniteGrid, JustifiedInfiniteGrid, FrameInfiniteGrid, PackingInfiniteGrid } from "@egjs/infinitegrid";
// InfiniteGrid.MasonryInfiniteGrid
const grid = new MasonryInfiniteGrid(container, {
gap: 5,
useResizeObserver: true,
observeChildren: true,
});
grid.renderItems();
预猜性能大小或隐形物品.
如果所有物品都一样大小呢?
如果你使用 isEqualSize 选项,所有项目都被认为大小相同.
每次调整大小只计算一个项目的大小.
添加 data-grid-not-equal-size="true" 属性,如果有一个例外项目,其大小需要在使用等分码时计算.
<div class="item item1"></div>
<div class="item item1"></div>
<div class="item item1"></div>
<!--item2 is a different size than item1.-->
<div class="item item2" data-grid-not-equal-size="true"></div>
如果有一个大小组存在呢?
isEqualSize 假设所有项目都是平等的。 但如果有两个以上的大小组,请使用 data-grid-size-group。 。 。 .
<!--item1 has the same size.-->
<div class="item item1" data-grid-size-group="1"></div>
<div class="item item1" data-grid-size-group="1"></div>
<!--item2 has the same size.-->
<div class="item item2" data-grid-size-group="2"></div>
<div class="item item2" data-grid-size-group="2"></div>
如果所有物品都不改变大小怎么办?
如果所有项目没有恒定大小,请使用 isConstantSize 选项。 调整大小不计算项目大小.
如果您想要重新计算, 请使用 .updateItems(items, { useOrgResize: true }) 方法或 .renderItems({ useOrgResize: true }) 方法.
• 软件包
| 软件包 | 版本 | 说明 |
|---|---|---|
| @egjs/无限网格 |  | 无限绿色的香草模组 |
| @egjs/ngx-无限网格 |  | 角质 @egjs/ 无限网格端口 |
| @egjs/反应-无限网格 |  | 反应 @egjs/ 无限网格端口 |
| @egjs/vue-infinitegrid (英语) |  | Vue.js@2 请检查isbn=值 (帮助) @egjs/ 无限网格端口 |
| @egjs/vue3-无限网格 |  | Vue.js@3 (中文(简体) ) @egjs/ 无限网格端口 |
| @egjs/ svelte-无限网格 |  | 丝绒 @egjs/ 无限网格端口 |
QQ 支持的浏览器
 |  |  |  |  |  |
|---|---|---|---|---|---|
| 9+( 带有多填充), 11+ 对角 & Svelte | 最新 | 最新 | 最新 | 7个+ | 4+ (中文(简体) ) |
德摩斯语
检查我们 演示文稿。 。 。 .
页:1
见 文档 页 次.
捐款
见 捐款额。 。 。 .
* 反馈
请存档 问题。 。 。 .
* 路线图
看我们的 路线图。 。 。 .
许可证
@egjs/无限网格在下方发布 麻省理工学院许可证。 。 。 .
Copyright (c) 2015-present NAVER Corp.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
