获得最好的方形排列

Question

The Situation

I have a certain amount of squares. I want these square to always from a square like grid but it can't have any empty spaces. I'd use JavaScript to do this. The grid would be stored like so

var gridLayout = [[1, 2], [3, 4]];

This would result in this grid

The Problem

If I have 16 squares it would result with

var gridLayout = [[1, 2, 3, 4],[5, 6, 7, 8],[9, 10, 11, 12],[13, 14, 15, 16]];

And the visual

Now all that's easy to do, but what if there's 3 squares? I'd like it to do something like this, favoring the horizontal over the vertical layout .

var gridLayout = [[1, 2, 3]];

with the visual

If I had 8 squares it couldn't make the perfect square so I'd like to be

var gridLayout = [[1, 2, 3, 4], [5, 6, 7, 8]];

And the visual

What I've tried

I've looked at this but it seems to be working with rectangles instead of squares. I also have a very hard time following without the visuals of what they want.

I have also looked at this which is kinda similar but seem to be a bit irrelevant to my situation.

Conclusion

How would I create the gridLayout in such a way as what I want? Any help is appreciated.

Answer 1

You can use a solution from Split array into chunks , to split an array of elements. Now we just need to determine the correct chunk size.

It looks like the criteria is:

• Each chunk must be the same size. This can be achieved by requiring that the number of elements is evenly divisible by the chunk size (ie #elements % chunk_size === 0 ).
• There should be at most as many rows as columns. In other words, the chunk size must be larger than the number of chunks. We can fulfill that by starting with a chunk size that is at least Math.sqrt(#elements) .

 // Implementation function chunk (arr, len) { var chunks = [], i = 0, n = arr.length; while (i < n) { chunks.push(arr.slice(i, i += len)); } return chunks; } function gridify(arr) { let size = Math.ceil(Math.sqrt(arr.length)); while (arr.length % size !== 0) { size += 1; } return chunk(arr, size); } // Helper functions for example function range(n) { return Array.from({length: n}, (_,i) => i+1); } function run(size) { console.log(JSON.stringify(gridify(range(size)))); } // Create examples run(4); run(16); run(3); run(8);

There is hopefully a better way to determine the chunk size than just iterating and increasing size, but that's what I came with in this short time.