Quiero hacer una interfaz con un contenedor donde el usuario elija una cantidad de cuadrados para mostrar. Los cuadrados deben usar el máximo de espacio, con un mínimo de pérdida. Por lo tanto, el ancho de un cuadrado debe calcularse a partir del ancho y la altura del contenedor.

A partir de este problema, rápidamente llegué a esta función:

 function calcSquareWidth(nbSquares = 1) { //items is the number of squares let width = $('#container').width(); //width of the container let height = $('#container').height(); //height of the container return Math.sqrt((width * height) / nbSquares); //width of a square }

JSFiddle

En teoría esto funciona, pero esta función no tiene en cuenta el espacio desperdiciado del contenedor. En otras palabras, da el lado de uno de los cuadrados, si queremos usar todo el contenedor. Pero solo queremos usar la porción máxima del contenedor para mostrarlos, no todo.

Así que partí del principio de que tenía que encontrar la manera de recuperar la superficie sobrante, luego restarla de la superficie total del recipiente y aplicar mi función.

 function calcSquareWidth(nbSquares = 1) { let width = $('#container').width(); //width of the container let height = $('#container').height(); //height of the container let surface = width * height; //surface of the container let x = Math.sqrt( surface / nbSquares); //side of a square use the whole container // To get the excess, I divide the container width and height by the side of a square and I get the integer part let eWidth = Math.floor(width / x) * x; //width of the excess let eHeight = Math.floor(height / x) * x; //height of the excess let eSurface = eWidth * eHeight; //surface of the excess return x - (Math.sqrt(surface - eSurface) / nbSquares); }

JSFiddle

Ese es el mejor resultado que tengo. Pero eso no es perfecto. Algunos cuadrados pueden salir del contenedor.

He hecho algún otro experimento, pero nada que mostrar aquí. He hecho algunas pruebas con css pero tampoco llego.

Si alguien tiene una idea, me interesa!

PD: Mi inglés no es nada malo, ¡pero tengo que aprender más! Por lo tanto, no sea tímido para reclamar algunos detalles si es necesario.

Gracias !