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

来源：互联网发布：如何开淘宝话费充值店编辑：程序博客网时间：2024/04/27 14:03
window.onload = function() {    fall("myFall", 4, 330, 60);     var imgs = document.getElementsByTagName("img");    var bottom = document.getElementById("bottom");    var top = document.getElementById("top");    for (var i = 0; i < imgs.length; i++) {        imgs[i].onclick = function() {         bottom.style.display = "block";         top.style.display = "block";         top.style.background = "url(" + this.getAttribute("src") + ")";         top.style.backgroundSize = "cover";        }    }    bottom.onclick = function() {     top.style.display = "none";     this.style.display = "none";    }};function fall(fallId, cols, colWidth, margin) {     var liArr = [];     var fall = document.getElementById(fallId);    var lis = fall.getElementsByTagName("li");    var imgs = document.getElementsByTagName("img");    for (var i = 0;i < imgs.length; i++) {        lis[i].style.width = colWidth + "px";         imgs[i].style.width = colWidth - margin + "px";        imgs[i].style.margin = margin / 2 + "px";    }    for (var i = 0; i < lis.length; i++) {        if (i < cols) {             liArr[i] = lis[i].scrollHeight;            lis[i].style.left = i * colWidth + "px";            lis[i].style.top = "0px";        }        else {             var min = liArr[0], index = 0;            for (var j = 1; j < liArr.length; j++) {                if (min > liArr[j]) {                min = liArr[j];                    index = j;                }            }            liArr[index] = min + lis[i].scrollHeight;            lis[i].style.left = index * colWidth + "px";            lis[i].style.top = min + "px";        }    }}
1 0