Как заполнить контейнер DIV элементами на основе фактического размера контейнера?

Question

У меня есть контейнер DIV где-то на странице, где min-width и min-height установлены некоторые значения.

Я загружаю в него небольшие панели (DIV с display: inline-block), используя обратные вызовы иjavascript.

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

Я хочу отследить изменения размера контейнера и загрузить больше элементов, сколько будет уместиться, не вставляя их в новое пространство контейнера.

Я видел это на amazon.com.У них есть панели, которые отображают 4 продукта, но если окно браузера развернуто, на тех же панелях будет отображаться больше продуктов, заполняющих все доступное пространство в контейнере.

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

Есть ли сценарий, который я мог бы использовать, или пример кода?

Спасибо, Андрей

Answer 1

Нашел очень хорошее решение проблемы. Вот код: (термин «дисплей» здесь используется в том же смысле, что и в супермаркете):

function updateDisplay() {
    $(".s2", this).hide();
    var x = $(".s2", this);

    var prevPos = -1;
    var nrows = 2;
    for (var i = 0; i < x.length; i++) {
        $(x[i]).toggle();
        var curPos = $(x[i]).position().left;
        if (curPos < prevPos) {
            if (--nrows == 0) {
                $(x[i]).toggle();
                break;
            }
        }
        prevPos = curPos;
    }
}

function updateDisplays() {
    $(".dcon").each(updateDisplay);
}

$(window).resize(updateDisplays);
$(document).ready(updateDisplays);

Вы можете увидеть его в действии на следующих страницах:

www.megabit-mich.ru

www.sportolimpia.ru