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";
}
}
}
【ife】任务四十四:多功能相册之瀑布布局
最新推荐文章于 2017-10-18 11:57:46 发布