介绍
ember-cli-masonry-grid是一个在Ember.js应用程序中嵌入响应式砌体布局的简单解决方案。使用此包，您可以轻松地将砌体布局添加到Ember.js应用程序中。
安装
要安装ember-cli-masonry-grid，请通过npm运行以下命令：
npm install ember-cli-masonry-grid --save-dev
使用方法
在您的Ember.js组件中使用ember-cli-masonry-grid非常简单。您可以根据需要在组件模板中安装和配置砌体布局，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -------------------------
------ ------- ------------------------
------- ------------
------ ---
------ -
-- ---
--------------------------
-- --------
------------------------
----- ---------
---
------------------------
----- ---------
---
------------------------
----- ---------
---
-
---在组件模板中，您可以像使用任何其他Ember.js组件一样使用{{yield}}，如下所示：
{{#each items as |item|}}
{{yield item}}
{{/each}}您也可以自定义砌体布局的大小和列数：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -------------------------
------ ------- ------------------------
------- ------------
------ ---
-------- -
------------ ----
------- ---
------------- -------
--
------ -
-- ---
--------------------------
-- --------
------------------------
----- ---------
---
------------------------
----- ---------
---
------------------------
----- ---------
---
-
---在模板中，您可以根据需要使用{{masonry-grid}}组件：
{{#masonry-grid options=options as |masonry|}}
{{#each items as |item|}}
<div class="item">
{{yield item}}
</div>
{{/each}}
{{/masonry-grid}}示范
以下是一个简单的示例，演示如何将ember-cli-masonry-grid添加到您的Ember.js应用程序中。
首先，您需要创建一个新的Ember.js应用程序：
ember new my-app cd my-app
然后，在您的应用程序中安装ember-cli-masonry-grid：
npm install ember-cli-masonry-grid --save-dev
接下来，在您的应用程序中添加一个新组件：
ember g component my-grid
在my-grid.js文件中，添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -------------------------
------ ------- ------------------------
------- ------------
------ ---
------ -
--------------------------
-- --------
------------------------
----- ---------
---
------------------------
----- ---------
---
------------------------
----- ---------
---
-
---在my-grid.hbs文件中，添加以下代码：
{{#masonry-grid as |masonry|}}
{{#each items as |item|}}
<div class="item">
{{yield item}}
</div>
{{/each}}
{{/masonry-grid}}运行您的应用程序：
ember serve
现在，您的应用程序中应该已经添加了砌体布局组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8781e8991b448d923d