什么是 ngx-isotope-universal
ngx-isotope-universal 是一个基于 Angular 的，可用于各种类型网站的 Isotope 布局库。Isotope 布局是一种非常流行的网站布局技术，它可以实现漂亮的网格式布局，且不易产生空隙。
ngx-isotope-universal 基于 Isotope.js 库，能够快速、简单地实现 Isotope 样式效果，但同时又具有 Angular 应用程序的所有优点。
安装和使用 ngx-isotope-universal
安装
使用 npm 命令安装 ngx-isotope-universal 模块：
npm install ngx-isotope-universal --save
导入
在你的 Angular 模块中导入 IsotopeModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用
在你的组件中将 Isotope 列表引入并使用 ngFor 指令来渲染列表：
<isotope-grid [items]="items">
<div isotope-item *ngFor="let item of items">
{{ item.title }}
</div>
</isotope-grid>在组件中，定义一个 items 数组，即可展示这个数组里的所有项目。
配置
IsotopeModule 支持多种选项，可以控制布局参数的大小、样式、模式等等。可以直接在模板中添加属性来更改选项，如下：
<isotope-grid [items]="items" [layout]="layout" [options]="options">
<div isotope-item *ngFor="let item of items">
{{ item.title }}
</div>
</isotope-grid>在组件中定义 layout 和 options 变量：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------- --------------- ----------------- --------------------
---- ------------ ----------- ---- -- -------
-- ---------- --
------
---------------
-
--
------ ----- ------------ -
----- - -
- ------ ----- -- --
- ------ ----- -- --
- ------ ----- -- --
- ------ ----- -- --
- ------ ----- -- --
- ------ ----- -- --
--
------ - ----------
------- - -
-------- -
------------ ----
------- --
--
----------- -
------------ ----
---------- ---
-
--
-示例代码
下面是一个简单的项目，展示了如何使用 ngx-isotope-universal 实现 Isotope 样式效果：
<!-- app.component.html -->
<isotope-grid [items]="items" [layout]="layout" [options]="options">
<div isotope-item *ngFor="let item of items">
{{ item.title }}
</div>
</isotope-grid>-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------- --------------- ----------------- --------------------
---- ------------ ----------- ---- -- -------
-- ---------- --
------
---------------
-
--
------ ----- ------------ -
----- - -
- ------ ----- -- --
- ------ ----- -- --
- ------ ----- -- --
- ------ ----- -- --
- ------ ----- -- --
- ------ ----- -- --
--
------ - ----------
------- - -
-------- -
------------ ----
------- --
--
----------- -
------------ ----
---------- ---
-
--
-总结
ngx-isotope-universal 是一个非常强大、方便的 Isotope 布局库，在 Angular 应用程序中实现优美、紧凑的网站布局效果。在开发 Web 应用程序时，使用 ngx-isotope-universal，可以大幅提高我们的工作效率，减少重复工作，生成更精美、流畅的界面效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f76238a385564ab68ea