简介
Ember-Justified-Gallery 是一款基于 Ember.js框架 的一个图片排版库，使用该库可以实现照片墙、相册等排版效果。它支持响应式布局，并可以自动判断图片大小，根据预设的参数对图片进行自动对齐和缩放，以达到最佳的视觉效果。此外，该库还支持自定义样式和动画等高级特性。
安装
Ember-Justified-Gallery 是一个 npm 包，可以直接通过 npm 安装。在终端中输入以下命令即可：
npm install ember-justified-gallery --save
使用
在项目中引入 Ember-Justified-Gallery:
import Ember from 'ember'; import JustifiedGallery from 'ember-justified-gallery';
然后，在组件中使用：
-- -------------------- ---- -------
------ ------- ------------------------
--------------- -
---------- ----
------------- --
------- -
--
------- -
-
---- ------------------------------
------ ------ ------
--
-
---- ------------------------------
------ ------ ------
--
---
--
-------- -
------------------------- -
------------------- ------------
-
-
---此时，组件的模板部分需要添加相应的 HTML 代码：
{{#justified-gallery options=galleryOptions images=images onLayoutComplete=(action 'onGalleryLayoutComplete')}}
{{#each images as |image|}}
<a href={{image.url}}} data-caption={{image.title}}>
<img src={{image.url}}} alt={{image.title}}>
</a>
{{/each}}
{{/justified-gallery}}在组件的 JavaScript 代码中，我们定义了一个 galleryOptions 对象来配置图片排版的参数。该对象包括图片的行高、最大行数和 margin 等配置项，以及一个 images 数组来存放图片的具体信息。
在组件的模板代码中，我们使用了 Ember-Justified-Gallery 提供的 控件标签 {{justified-gallery}} 来实现图片排版，并将 galleryOptions 和 images 对象分别传递给该标签作为参数。此外，我们还为该标签绑定了一个回调函数，该函数会在图片排版完成后调用。
常见配置项
在 galleryOptions 对象中，可以设置以下常见配置项：
rowHeight图片排版的行高。该值需要与图片样式中的高度一致。maxRowsCount每列图片的最大数量。设置该值可以控制图片的数量，实现换页效果。lastRow指定最后一行的对齐方式。margins图片之间的间距。可以是一个数字，也可以是一个以“px”为单位的字符串。captions是否显示图片标题。该值可以是字符串或一个回调函数。randomize是否按照随机顺序排列图片。filter利用回调函数对图片进行过滤。animationDuration动画的时长。可以是一个数字，也可以是一个以“ms”为单位的字符串。
自定义样式
Ember-Justified-Gallery 提供了一些默认的样式，但可以通过添加自定义样式来实现更加丰富的排版效果。如果要自定义样式，请从默认样式中继承，并重写必要的属性即可。
例如，可以在 CSS 文件中添加以下代码：
-- -------------------- ---- ------- ------------------ --- - ----------- --------- ---- --------- - ------------------ ------- - ------- - ----------- - ------------------ -------- - ----------- - - - --- --------- ---- ---- ----- -
总结
Ember-Justified-Gallery 是一款非常优秀的图片排版库，其具有响应式布局、自动对齐和对图片数量的控制等特点，可以适用于各种大小、比例和方向的图片。此外，它还可以通过灵活的配置项和自定义样式来实现更加灵活的效果。
本篇文章简单介绍了使用 Ember-Justified-Gallery 的方法，并提供了一些常见配置项和自定义样式的方法。希望对前端开发者们有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecba7