如何实现无间隙块布局算法？ [英] How to implement a gapless block layout algorithm?

问题描述

我正在尝试以4个单位宽，任意数量的高单位的网格布局显示图像。

I'm trying to display images in a grid layout that is 4 units wide by an arbitrary number of units high.

网格中的每个图像可能都是1x1 ，1x2、2x1或2x2单位。我还使用jQuery石工来尝试消除布局中的一些间隙。

Each image in the grid may be 1x1, 1x2, 2x1 or 2x2 units. I'm also using jQuery masonry to try and eliminate some gaps in the layout.

图像显示的大小（1x1、2x2等）是

The size an image is displayed at (1x1, 2x2, etc.) is a "preferred" size based on its dimensions.

我认为消除布局差异的最简单方法是在布局中以除他们的首选大小。如何在算法上做到这一点，将显示的照片数量保持在首选尺寸，同时覆盖确定为无间隙布局所必需的照片。

I'm thinking that the easiest way to eliminate gaps in the layout would be to display certain images in the layout at sizes other than their preferred size. How can I do this algorithmically, maintaining the largest number of photos that are displayed at their preferred size, while overriding for those that are determined to be necessary for a gapless layout.

一个直观的例子；我想打开它：

A visual example; I want to turn this:

进入他们在此网站上看到的内容： http：/ /500px.com/

into something like what they have on this website: http://500px.com/

推荐答案

您可以做的最简单的操作是将1x2对配对，将2x1对配对和1x1s的四倍这样就可以轻松地布置很多2x2图像，并且只需要调整奇数图像的大小即可。这（或类似的东西）几乎可以肯定是500px.com的工作。

The simplest thing you can do is group pairs of 1x2s together, pairs of 2x1s together, and quadruples of 1x1s together. Laying out lots of 2x2s is then easy, and only the odd-images out will need to be resized. This (or something like it) is almost certainly what 500px.com does.

我怀疑这种解决方案并不能真正与您的从左到右布局 ，从上到下的限制。但是我不确定该限制到底意味着什么。也许如果您能说清楚的话，那意味着我们可以更好地帮助您。

I suspect this solution doesn't really jive with your "laid out left-to-right, top-to-bottom" restriction. But I'm not sure what that restriction means, exactly. Perhaps if you could make it clear what that means we could help you better.

这篇关于如何实现无间隙块布局算法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！