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');

}