将图像均匀分布到图库中的列 [英] Distribute images evenly to columns in gallery

问题描述

简要说明

我目前正在建立一个有三列的图库，每列包含所有宽度相同但高度不同的图像。 / p>

列的图像是从目录中收集的，并使用PHP glob（）函数放入数组中。这是一个简单的部分......

图库的示例：

问题

当这些图像被动态加载并放入列中时，列的高度可能会有很大差异。

例如，如果在第1列放置了两张肖像照片，并且在第2列放置了两张风景照片，则列将非常不均匀，如下所示：

< img src =https://i.stack.imgur.com/7hKxI.pngalt =此设计的问题>

极不可能列将在高度上匹配，但我希望它们与给定的图像尽可能接近，因此希望形成一个算法，该算法将查看检索到的图像并将它们放在列中以返回三列尽可能接近身高。

因此，例如，脚本会通过重新排序图像并将它们放置如下来纠正上述问题：

如果我有这个，我有能力写这个正确的算法，我只是想不出这样做的最佳步骤。任何人都可以建议任何步骤吗？

可能的解决方案

我想到的一种方法（我认为会有更好的方式，因为我认为这是有缺陷的）：

1. 将所有合并的图像的高度相加并除以列数（3）。这将为我们提供目标的高度


2. 将图像分配到列数组，当它超过列的高度时，溢出到下一列。


3. 将任何左侧图像放入第一列，然后放入第二列等...

提前致谢

解决方案

我建议以下内容：

1. 将图像从最高到最短排序（假设您的宽度不变）


2. 将图像添加到第一列数组


3. 添加图像到下一列数组，直到总高度等于或大于前一列数组


4. 重复步骤2& 3直到所有图像都被使用（你甚至可以按升序和降序交替填充列以帮助解决问题）


5. 在将图像添加到列之前，随机播放图像数组以使网格线显得随机/ li>
   
6. 调整较短列图像的垂直边距以匹配最高列的总高度（垂直对齐，排序）

希望这会有所帮助！

Brief Explanation

I am currently building a gallery that has three columns, each column contains images all of which have the same width, but can vary in height.

The images for the columns are gathered from a directory and placed into an array using the PHP glob() function. This is the easy part...

An example of what the gallery looks like:

The Issue

As these images are being loaded and placed into the columns dynamically, there is a chance that the columns may differ in height hugely.

For instance, if two portrait photos were placed in column 1, and two landscape photos were placed in column 2, the columns would be very uneven like so:

It is extremely unlikely that the columns will ever match in height, but I would like them to be as close as possible with the given images and therefore would like to form an algorithm that will look at the images retrieved and place them in the columns to return three columns that are as close in height as they can be.

So, for example, the script would correct the above problem by re-sorting the images and placing them like so:

I am capable of writing this if I have the correct algorithm, I just cannot think of the best steps to do this. Can anyone suggest any steps?

Possible Solution

One of the methods I thought of (I think there will be better ways as I think this is flawed):

1. Add up the height of all of the images combined and divide by the number of columns (3). This will give us the height to aim for
2. Distribute the images to the column array and when it exceeds the height of the column, overflow onto the next column.
3. Place any left over images into the first column, then second column etc...

Thanks in advance

解决方案

I'd suggest something along the following:

1. Order your images into an array from tallest to shortest (assuming your width is constant)
2. Add image to first column array
3. Add images to next column array until total height is equal or greater than previous column array
4. Repeat steps 2 & 3 until all images are used (you could even alternate populating the columns in ascending and descending order to help even things out)
5. Shuffle image arrays to make gridlines appear random before adding images to columns
6. Adjust vertical margins on images for the shorter columns to match total height of tallest column (a vertical justified align, of sorts)

Hope this helps!

这篇关于将图像均匀分布到图库中的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！