javascript - 如果 div 开始填满，自动调整内部图像的大小？

Question

我有这个想法，将“在线用户”添加到我的网站。但我不知道怎么做这件事。

让我解释。如果有在线用户，它会在 div 上显示。

但是如果有很多在线用户，这会挤满 div，我希望里面的图像自动调整大小，以容纳额外的用户。任何人？

PS：我还不能发图片。

Answer 1

这应该让你开始：http: //jsfiddle.net/3KUvt/

该逻辑涉及在开始时计算总可用区域，并在添加新用户时计算新大小（针对每个用户元素）。

请注意，这是一个 2 分钟的小提琴，需要在您的身边进行一些微调，然后才能在生产中使用它。:)

代码： 查看上面的演示以获得完整的图片

// can fit 8 of them without shrinking, so pre-calculate available area
var availableArea = 8 * 40 * 40;

function addUser() {

    // after adding the new one, how many will there be?
    var newCount = $('#holder > .user').length + 1;

    // calculate new dimension of each user
    var newW = 40; // use same var for w and h since its a square
    if(newCount > 8) {
        // reduce width (and height) till it fits
        while((newCount * newW * newW) > availableArea) {
            newW -= 1;
        }
    }

    // resize all existing users
    $('#holder > .user').css({
        width: newW + 'px',
        height: newW + 'px'
    });

    // add the new user (with the new height)
    $('<div class="user"><div>').css({
        width: newW + 'px',
        height: newW + 'px'
    }).appendTo('#holder');

}