正向画廊（Justified Gallery）技术文档

1. 安装指南

NPM安装方式

使用npm包管理工具，运行以下命令安装Justified Gallery：

npm install justifiedGallery

Bower安装方式

使用Bower包管理工具，运行以下命令安装Justified Gallery：

bower install justifiedGallery

2. 项目的使用说明

将以下HTML结构放入页面中，其中包含一系列图像链接和缩略图：

<div id="mygallery">
  <a href="path/to/myimage1_original.jpg">
    <img alt="标题1" src="path/to/myimage1_thumbnail.jpg"/>
  </a>
  <a href="path/to/myimage2_original.jpg">
    <img alt="标题2" src="path/to/myimage2_thumbnail.jpg"/>
  </a>
  <!-- 其他图像 -->
</div>

然后在HTML文件中包含Justified Gallery的CSS和JavaScript文件：

<link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.justifiedGallery.js"></script>

最后，通过jQuery调用插件来初始化画廊：

$("#mygallery").justifiedGallery();

3. 项目API使用文档

以下是Justified Gallery的一些主要选项：

• rows: 设置要显示的行数。
• rowHeight: 设置每行的高度。
• maxRowHeight: 设置行的最大高度。
• lastRow: 设置最后一行的对齐方式。
• cssAnimation: 是否使用CSS动画。
• imagesAnimationDuration: 图像动画的持续时间。
• captionsAnimationDuration: 标题动画的持续时间。
• captionsVisibleOpacity: 标题的可见透明度。
• justifyThreshold: 设置对齐阈值。

例如，以下是如何使用这些选项：

$("#mygallery").justifiedGallery({
  rows: 3,
  rowHeight: 200,
  maxRowHeight: 250,
  lastRow: 'justify',
  cssAnimation: true,
  imagesAnimationDuration: 500,
  captionsAnimationDuration: 500,
  captionsVisibleOpacity: 0.7,
  justifyThreshold: 300
});

更多选项和详细说明，请参考官方文档。

4. 项目安装方式

Justified Gallery可以通过以下两种方式安装：

通过NPM

npm install justifiedGallery

通过Bower

bower install justifiedGallery

安装后，将相应的CSS和JavaScript文件引入到HTML页面中，并按照使用说明初始化画廊。