Question

我在页面的某处有一个DIV容器，其中min-width和min-height设置为某些值。

我正在使用回调和javascript将小面板（带显示的DIV：内联块）加载到其中。

现在面板的数量是固定的，因此当用户最大化浏览器窗口时，容器的大小会增加，并且最后一行的末尾会出现空格。

我希望捕获容器的大小更改，并加载更多元素，尽可能多的元素而不会剪切到容器的新空间。

我在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

如何使用基于容器实际大小的元素填充DIV容器？

1 个答案: