README

传入盒子大小，获取用于类似Flickr上所见的美观整齐布局的大小和坐标。例如，探索页面是一个很好的例子。这里还有一个在Flickr的专辑页面上使用 fullWidthBreakoutRowCadence 选项的例子。

它将这个（简化版）

[0.5, 1.5, 1, 1.8, 0.4, 0.7, 0.9, 1.1, 1.7, 2, 2.1]

转换为这个（简化版）

{
    "containerHeight": 1269,
    "widowCount": 0,
    "boxes": [
        {
            "aspectRatio": 0.5,
            "top": 10,
            "width": 170,
            "height": 340,
            "left": 10
        },
        {
            "aspectRatio": 1.5,
            "top": 10,
            "width": 510,
            "height": 340,
            "left": 190
        },
        ...
    ]
}

这为您提供了制作类似这样东西所需的一切

为什么？

而不是依赖于另一个客户端计算的JS依赖项，这允许我们在服务器端进行这些计算（假设我们知道容器预期的宽度）。

但是，调整窗口格式可能会产生意外的效果。

安装

composer require lychee-org/php-flickr-justified-layout

简单用法

use LycheeOrg\PhpFlickrJustifiedLayout\Contracts\AspectRatio;
use LycheeOrg\PhpFlickrJustifiedLayout\Contracts\WidthHeight;
use LycheeOrg\PhpFlickrJustifiedLayout\LayoutConfig;
use LycheeOrg\PhpFlickrJustifiedLayout\LayoutJustify;

/** @var Collection<AspectRatio>|Collection<WidthHeight> $in */
$in;
$layoutJustify = new LayoutJustify();
$config = new LayoutConfig();

$geometry = $layoutJustify->compute($in, $config);

传递给compute方法的对象必须实现AspectRatio或WidthHeight接口。

配置

参见配置对象

public function __construct(
    int $containerWidth = 1060,
    int|LeftRightTopBottom $containerPadding = 10,
    int|HorizontalVertical $boxSpacing = 10,
    int $targetRowHeight = 320,
    float $targetRowHeightTolerance = 0.25,
    false|int $maxNumRows = false,
    false|float $forceAspectRatio = false,
    bool $showWidows = true,
    false|int $fullWidthBreakoutRowCadence = false,
    string $widowLayoutStyle = 'left',
){...}

参数	类型	默认值	描述
$containerWidth	`int`	`1060`	盒子将包含在内的宽度，无论内边距。
$containerPadding	`int\|LeftRightTopBottom`	`10`	提供一个整数以应用所有边界的内边距，或提供一个LRTB对象以应用每边的单独值。
$boxSpacing	`int\|HorizontalVertical`	`10`	提供一个整数以在水平和垂直方向上应用间距，或提供一个HV对象以应用每个轴的单独值。
$targetRowHeight	`int`	`320`	它被称为目标，因为行高是我们用来使一切整齐的工具。算法将尽可能地接近目标行高。
$targetRowHeightTolerance	`float`	`0.25`	行高可以偏离targetRowHeight的最大距离。0会强制行宽正好为targetRowHeight，这可能会使justify变得不可能。值必须在0和1之间。
$maxNumRows	`false\|int`	`false`	将在此数字处停止添加行，不管还需要布局多少项目。
$forceAspectRatio	`false\|float`	`false`	在此处提供纵横比以返回该纵横比的所有内容。使输入数组中的值无关紧要。数组的长度仍然相关。
$showWidows	`bool`	`true`	默认情况下，我们将返回整齐布局末尾的项目，即使它们不构成完整的行。如果为false，则将从输出中省略。
$fullWidthBreakoutRowCadence	`false\|int`	`false`	如果您希望在每 `n` 行插入一个全宽框，可以使用此参数进行指定。该行的框将忽略 `targetRowHeight`，使其宽度为 `containerWidth - containerPadding`，高度则根据其长宽比定义。只有当该项的长宽比 >= 1 时才会发生。最好查看示例以了解这是如何工作的。
$widowLayoutStyle	`字符串`	`justify`	对孤行进行对齐，可能的值有 `left`、`center` 和 `justify`

开源社区支持

我们想感谢 JetBrains 为我们提供的开源开发 - 社区支持计划。

lychee-org / php-flickr-justified-layout

维护者

详细信息

README

为什么？

安装

简单用法

配置

开源社区支持