У меня есть ul с фиксированной шириной 235px и высотой 200px. Этот ul заполняется n числами li в зависимости от результатов запроса. Как я могу рассчитать размеры ли для того, чтобы они заполнили все доступное пространство внутри ул.

Я попытался вычислить периметр контейнера и сравнить его с общим периметром каждого элемента, но это не работает.

1
Florian Shena 1 Фев 2013 в 15:04

4 ответа

Лучший ответ

Хорошо, вот моя попытка кода, который будет работать с достаточно большим охватом ul (не уверен, что он на самом деле максимальный), учитывая ограничения, что li не обязательно должны быть квадратными, но должны все быть одинакового размера для любого количества предметов.

Первая часть дает функцию getSquare(n), которая запоминает генерацию квадратов, так что если вам нужно использовать ее несколько раз на странице, она не будет пересчитывать вещи.

Вторая часть - это функция, которая выполняет вычисления. Передайте ему количество элементов, ширину и высоту вашего контейнера, и он вернет объект со свойствами ширины и высоты для элементов. Это не гарантирует целочисленные результаты.

Строка с броском предназначена только для тестирования, может быть удалена.

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 };
}
0
Matt Sach 5 Апр 2016 в 16:20

Вы можете сделать это с помощью jQuery, если хотите.

Что-то типа:

$(document).ready(function(){
   var liCount = parseInt($('ul li').length());
   var height = parseInt($('ul').height();
   var liHeight = height / liCount;
   $('ul li').css('height', liHeight);
});

Конечно, не забудьте указать ul и ID и передать их в jQuery вместо ul ul, иначе все объекты li на вашей странице будут затронуты.

0
Wouter 1 Фев 2013 в 11:43

Не упоминайте ширину для li вообще

HTML

<div class="wrap">
    <ul>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
    </ul>
</div>

CSS

.wrap{
    width:235px;
    height:200px;
    background:grey
}
ul{background:red; margin:0; padding:0; width:100%;}
li{
    display:inline-block;  
    margin-right:2px;
    background:red;
    border-right:solid black green; 
}

DEMO


СЛУЧАЙ 2

Добавьте height:100% к li (это заставит li скрыть всю доступную высоту) и задайте одинаковый цвет bg для обоих ul & li, чтобы было похоже, что он занял доступную ширину

html,body{height:100%}
ul{
   background:red; 
   margin:0; padding:0; 
   width:235px;
   height:200px;
}
li{
    display:inline-block;   height:100%;
    margin-right:2px;
    background:green;
    border-right:solid black green; 
}

DEMO 2

0
Sowmya 1 Фев 2013 в 11:20

Сделать динамическую высоту ul в соответствии с количеством li и применить отображение css: inline-block и overflow: скрыто для ul

1
Amar 1 Фев 2013 в 11:10