README

这是一个jQuery插件，允许您创建响应式、无限滚动和高品质的图像画廊。

对于创建网站的人来说，一个常见的问题是如何创建一个优雅的图像画廊，以管理图像的多种大小和宽高比。Flickr和Google+以非常出色的方式处理这种情况，这个插件的目的就是提供这些解决方案的强大功能，并采用一个新的快速算法。

官方项目页面

发布历史

3.6.3

在thumbnailPath中添加了额外的参数来指定当前图像。这样就可以读取该图像的属性。
修复了在指定函数时使用filter时的错误。
修复了在norewind时使用filter时的错误。
在norewind的情况下进行了性能改进。
更改了选择器的行为。只有画廊的直接子元素可以被选为画廊条目。
修复了maxRowHeight的错误。

3.6.2

cssAnimation默认为true。是时候向前迈进，将IE留在过去。
修复了cssAnimation。
检查scrollbar的存在以避免图像调整大小的闪烁。
现在可以将容器设置为具有背景颜色，以便在waitThumbnailsLoad = false时可见。
已删除fixedHeight选项，因为现在可以使用maxRowHeight复制此行为。
最后一行的行高将计算为所有其他行平均行高。以前最后一行的行高总是遵循rowHeight选项，这可能小于所有其他行的实际高度。例如：一个100x100px图像的画廊在950px的容器中，其中rowHeight = 100。这个画廊将包含每行9张图片和用于校准的额外空间。经过校准后，每行的高度大约为105px。在这个例子中，最后一行的高度将是105px，而在过去，如果没有校准，它通常会是100px。
其他错误修复

3.6.1

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

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。之前的这种行为更像是一个bug而不是一个特性。
使用纯JavaScript的无穷滚动示例，以便更容易理解。
修复了一些无穷滚动中的bug

3.3

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

将所有标题设置在一个单独的对象中，以使其更紧凑

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

对 justification 公式进行重构以提高可维护性

3.2

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

3.1

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

3.0

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

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 安装。
步骤
- 将此仓库Fork并克隆。
- 打开终端并将当前目录更改为克隆的文件夹。
- 运行 npm install 以安装所有依赖项（包括Grunt）。
- 运行 bower install 以安装测试所需的所有依赖项。
- 运行 grunt debug 以仅构建库以进行测试（调试模式）。
- 运行 grunt 以在发布模式下构建此项目。

提交pull请求

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

holisticnetworking / justified-gallery

维护者

详细信息