README

Justified Gallery 是一个 JavaScript 库，允许您创建高质量的可调整图像画廊。

这对于创建网站的人来说是一个常见问题：您有一系列图像需要显示，但您不确定如何优雅地排列它们。像 500px、Flickr 或 Google 这样的重要网站以非常出色的方式显示图像，类似于砖墙的布局。Justified Gallery 将赋予您做到这一点的能力。

Justified Gallery 是一个专业且开源的库，甚至 500px（一家最好的摄影社交网络）也选择了它来展示他们的图像！

官方项目页面

发布历史

3.7

使用通用模块定义模式兼容 AMD 和 CommonJS 格式（提供 Webpack、Browserify 和 AMD/RequireJS 的示例）
.attr() 因为它在与 Foundation 的配合中造成了问题
现在可以使用该库，而无需将其定义为 jQuery 插件。但它仍然需要 jQuery 以提供更好的浏览器兼容性。

3.6.5

为了更大的灵活性，可以使用 imgSelector 选项选择图像，给定一个图像条目（例如一个 figure 或一个 div）
.prop() 以提高兼容性
从右到左选项
在页面调整大小时防止画廊高度塌陷并保持滚动位置
如果画廊不可见，则避免宽度检查

3.6.4

简化了具有 <figure> 的画廊的可能性。

3.6.3

在 thumbnailPath 中添加了额外的参数，用于指定当前图像。这样就可以读取该图像的属性
修复了在指定函数时使用过滤器时的错误
修复了在 norewind 时使用过滤器时的错误
在 norewind 的情况下提高了性能
更改了选择器的行为。只能选择画廊的直接子项作为画廊条目。
修复了 maxRowHeight 的错误

3.6.2

cssAnimation = true 作为默认值。现在是时候走向未来，把 IE 留在过去了。
修复了 cssAnimation
检查滚动条的存在，以避免图像调整大小的闪烁
现在可以将盒子配置为具有背景色，以便在 waitThumbnailsLoad = false 时可见。
移除了 fixedHeight 选项，因为现在可以使用 maxRowHeight 来复制此行为。
最后一行的行高将计算为所有其他行的平均行高。在未进行调整之前，最后一行的行高始终遵循 rowHeight 选项，这可以小于所有其他行的实际高度。例如：在一个 950px 容器中的 100x100px 图像画廊，其中 rowHeight = 100。这个画廊将包含每行 9 张图片，并且用于调整的额外空间。调整后，每行的高度将约为 105px。在这个例子中，最后一行的高度将是 105px，而在过去，如果没有调整，通常将是 100px。
其他错误修复

3.6.1

错误修复
lastRow 选项可以是 'nojustify'，它与 'left' 相同，也可以是 'justify'、'center'、'right' 或 'hide'。
refreshSensitivity 选项，用于配置允许的宽度变化（以像素为单位）而无需重新构建画廊

thumbnailPath，用于配置 JG 使用自定义缩略图选择器，例如，我们只想通过更改当前文件名的后缀来选择正确的缩略图

 $("#myGallery").justifiedGallery({
 	thumbnailPath: function (currentPath, width, height) {
 		if (Math.max(width, height) < 250) {
 		    return currentPath.replace(/(.*)(_[a-z]+)(\..*)/, "$1_small$2");
 		} else {
 		    return currentPath.replace(/(.*)(_[a-z]+)(\..*)/, "$1_medium$2");
 		}
 	}
 });

3.6

排序（也适用于无限滚动）
过滤（也适用于无限滚动）
随机化图像现在也适用于无限滚动
支持文本条目（即不包含图片）
销毁方法
maxRowHeight 也可以是百分比
可配置的 sizeRangeSuffixes，例如，为了只有缩略图和大图，可以是
```
 sizeRangeSuffixes : {
 	500: '_t',
 	2000: '_m'
 }
```
可配置的条目选择器
代码重构

旧版本

3.5.4

添加了边框选项
修复了 waitThumbnailsLoad 和无限滚动的一些问题

3.5

默认后缀都是空的，为了更简单易懂。为了使用前缀，可以使用以下设置

 sizeRangeSuffixes : {
 	'lt100': '_t',
 	'lt240': '_m',
 	'lt320': '_n',
 	'lt500': '',
 	'lt640': '_z',
 	'lt1024': '_b'
 }

现在可以拥有具有以下结构的条目

 <div>
 	<a href="...">
 		<img src="..." />
 	</a>
 	<div class="caption">...</div>
 </div>

固定边距
整个相册的边框可以自定义
当 waitThumbnailsLoad = false 时，修复了回调的错误

3.4

性能改进
- 在缩略图存在宽度和高度属性的情况下，以及选项 'waitThumbnailsLoad'，布局会立即构建，而缩略图会在加载时随机出现。
- 其他代码重构以提高性能
如果没有 justify，如果只有一行，则不进行 justify。以前的行为更像是一个错误而不是一个特性。
使用纯javascript的无限滚动示例，以便更容易理解。
修复了一些无限滚动的问题

3.3

不再进行裁剪
- 移除了一些导致微小裁剪的浮点数近似
为标题设置初始不透明度，以便始终可见
- 也可以通过更改 less 文件来配置，如果有人喜欢 CSS 动画

将所有标题设置放入单个对象中，以更紧凑

 captionSettings : { //ignored with css animations
 	animationDuration : 500,
 	visibleOpacity : 0.7,
 	nonVisibleOpacity : 0.0
 },

重构对齐公式以提高可维护性

3.2

可以使用 div 相册而不是 a
修复了最后一行的错误
选项仅使用 CSS 动画（即 cssAnimation）
不使用 CSS 动画
- 可配置标题淡入/淡出时间（即 captionsAnimationDuration）
- 可配置标题最终不透明度（即 captionsVisibleOpacity）
- 可配置图片淡入时间（即 imagesAnimationDuration）
可配置阈值，以决定在存在 nojustify 的情况下也进行行对齐（即 justifyThreshold）

3.1

改进算法以减少图像裁剪
修复了与某些 jQuery 版本的错误
修复了固定高度的错误
设置检查和解析
添加了事件 jg.rowflush

3.0

完全重写！
逐行加载
- 插件不会等待所有相册缩略图都加载完成
- 当其缩略图可用时打印一行
- 非阻塞布局创建
不再有空白空间（如果相册需要加载更大的图片，它会先显示较小的图片，然后再用较大的图片替换它）
改进算法以获得更好的结果
- 不再在行末出现白色像素（错误修复）
- 大幅减少了图像裁剪
  - 垂直居中
  - 按比例放大图像，以查看图像的宽高比
改进算法效率
- 不再添加额外的标签或新元素来创建布局
- 所有图像都保留在 DOM 中，它们不会被删除或创建
  - 因此，每个标签都保留在链接和图像中
添加了 maxRowHeight 选项
自定义标题
缩略图随机化（randomize 选项）
有状态性
- 可以通过更改一些设置再次调用
- 可以通过再次调用以更新布局（在添加或删除图像后）
无限滚动功能
改进最后一行的行为
- 最后一行选项已更改
  - justifyLastRow 设置已重命名为 lastRow，它接受：'justify'，'nojustify'，'hide'。
- 选项可以隐藏不完整且无法对齐的行
- 如果空间较小，则插件也可以在 lastRow = 'nojustify' 的情况下对齐
静默错误处理
- 如果缩略图不存在，则布局中忽略它（隐藏）
- 如果插件需要一个不存在的缩略图，则保留上一个缩略图
- 错误仍然在控制台可见
加载指示器
- 当需要加载新行时可见
- 纯CSS指示器
- 通过更改CSS/Less进行配置
项目结构
- 使用Grunt管理构建
- Less
- 测试
- JavaScript和CSS验证
- CSS文件名更改为更标准的格式
许可证更改为MIT
改进了画廊大小检查，使其更不具侵入性
修复了当页面缩放时光箱移除的问题

2.1

已删除设置：'usedSizeRange'，现在插件会自动执行
设置行为已更改：'extension'，现在它接受正则表达式。旧的行为仍然有效，但不是安全的。
新行为：如果图像定义了属性 data-safe-src，则使用此属性，无论src属性是什么。这可以用来避免Photon或其他更改图像src的服务的图像问题。

2.0

已删除设置：'lightbox'，现在可以通过onComplete回调简单地完成。
添加设置：'rel'，以更改所有链接的 rel 属性。
添加设置：'target'，以更改所有链接的 target 属性。
设置名称已更改：'complete' 到 'onComplete'。
设置名称已更改：'sizeSuffixes' 到 'sizeRangeSuffixes'。
设置名称已更改：'usedSuffix' 到 'usedSizeRange'。
添加了显示Justified Gallery错误的div的CSS。现在可以更改或隐藏。

贡献

重要提示

请勿编辑dist子目录中的文件，因为这些文件是通过Grunt生成的。您将在src子目录中找到源代码。

代码风格

有关代码风格（如缩进和空白）的问题，请 遵循源代码中使用的约定。

修改代码

先决条件
- 确保您已安装最新版本的Node.js和npm。
- 通过运行grunt --version测试Grunt的CLI是否已安装。如果找不到命令，请运行npm install -g grunt-cli。有关安装Grunt的更多信息，请参阅入门指南。
- 确保您已安装Bower。如果没有，请使用npm install -g bower安装。
步骤
- 分支并克隆此存储库。
- 打开终端，并将当前目录更改为克隆的文件夹。
- 运行npm install以安装所有依赖项（包括Bower和Grunt）。
- 运行bower install以安装测试所需的所有依赖项。
- 运行grunt debug仅用于测试构建库（调试模式）。
- 运行grunt以在发布模式下构建此项目。

提交拉取请求

创建一个新分支，请不要直接在master分支上工作。
为要进行的更改添加失败的测试。
修复问题。
确保编写的测试不再失败，以及其他测试。
更新文档以反映任何更改。
将更改推送到您的分支并提交拉取请求。

skewer_team/ justified-gallery

维护者

详细信息