Question

I have an ul with fixed width 235px and height 200px. This ul is populated by n numbers of li depending on a query results. How can I calculate the dimensions of the li in order for them to fill all the available space inside the ul.

I have tried calculating the container’s perimeter and comparing it with the total of each element’s perimeter but that doesn’t work.

Answer 1

OK, here’s my attempt at code that will work out a fairly high coverage of the ul (not sure if it’s actually maximal), given the constraints that the lis need not be square, but must all be the same size for any given number of items.

The first part gives a function getSquare(n) which will memoize the generation of squares, so that if you need to use it multiple times on a page it won’t keep recalculating things.

The second part is the function that does the calculation. Pass it the number of items, and the width and height of your container, and it will return an object with width and height properties for the items. It doesn’t ensure integer results.

The line with the throw is just there for testing purposes really, could be removed.

var getSquare = (function()
{
    var squares = [];
    return function(n)
    {
        if (!squares[n])
        {
            squares[n] = Math.pow(n, 2);
        }
        return squares[n];
    };
})();


function calcItemDimensions(itemCount, areaWidth, areaHeight)
{
    var x, y, slots,
        n = 0,
        sq = 0;

    while (itemCount > sq)
    {
        n += 1;
        sq = getSquare(n);
    }

    x = y = n;
    slots = sq;

    while (slots - itemCount >= x)
    {
        if (x === y) { y -= 1; }
        else { x = y; }
        slots = x * y;
        if (slots < itemCount) { throw new Error('slots < itemCount: ' + slots + ' < ' + itemCount); }
    }

    return { width: areaWidth / x, height: areaHeight / y };
}