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

2017-01-14 19:49:42来源:CSDN作者:zhouziyu2011人点击

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;     }};

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台