【ife】任务四十五：多功能相册之木桶布局

var imgs = [ 
    {"src": "images/task45_1.jpg", flag: 0},
    {"src": "images/task45_2.jpg", flag: 0},
    {"src": "images/task45_3.jpg", flag: 0},
    {"src": "images/task45_4.jpg", flag: 0},
    {"src": "images/task45_5.jpg", flag: 0},
    {"src": "images/task45_6.jpg", flag: 0},
    {"src": "images/task45_7.jpg", flag: 0},
    {"src": "images/task45_8.jpg", flag: 0},
    {"src": "images/task45_9.jpg", flag: 0},
    {"src": "images/task45_10.jpg", flag: 0},
    {"src": "images/task45_11.jpg", flag: 0},
    {"src": "images/task45_12.jpg", flag: 0}
];
window.onload = function() {
    var container = document.getElementById("container");
    var width = container.offsetWidth;
    for (var i = 0; i < imgs.length; i++) { 
        var img = new Image();
        img.src = imgs[i].src;
        imgs[i].ratio = parseFloat(img.width) / parseFloat(img.height);
    }
    var begin = 0; 
    var totalHeight = 0; 
    var rows = 0;  
    var flag = true;
    while(flag) { 
        var count = 0;
        var number = 0;
        for (var j = 0; j < imgs.length; j++) { 
            if (imgs[j].flag == 0 && count + imgs[j].ratio < 6) { 
                number++;
                var image = document.createElement("img");
                image.setAttribute("src", imgs[j].src);
                container.appendChild(image);
                count += imgs[j].ratio;
                imgs[j].flag = 1;
            }
        }
        rows++;
        if (begin + number != imgs.length) {
            height = parseFloat(width) / count;
            totalHeight += height;
            var images = document.getElementsByTagName("img");
            var totalWidth = 0;
            for (var j = begin; j < begin + number - 1; j++) { 
                images[j].style.height = height + 'px';
                images[j].style.width = height * imgs[images[j].getAttribute("src").slice(14, -4) - '0' - 1].ratio + "px";
                totalWidth += parseFloat(images[j].style.width);
            }
            images[begin + number - 1].style.height = height + 'px';
            images[begin + number - 1].style.width = parseFloat(width) - totalWidth + "px";
        }
        else {
            height = totalHeight / (rows - 1); 
            for (var j = begin; j < begin + number; j++) { 
                images[j].style.height = height + 'px';
                images[j].style.width = height * imgs[images[j].getAttribute("src").slice(14, -4) - '0' - 1].ratio + "px";
            }
            flag = false;
        }
        begin = begin + number; 
    }
};