VIP26/day18/js/1.照片墙.js

// 获取所有的图片
var allImg = document.getElementsByTagName("img");
// 获取屏幕宽高
var scrollHeight = document.body.clientHeight || document.documentElement.clientHeight;
var scrollWidth = document.body.clientWidth || document.documentElement.clientWidth;

/**
 *  0   1   2   3   4    5
 *  6   7   8   9   10   11
 *  12  13  14  15  16   17
 *  18  19  20  21  22   23
 */
// 间隙距离
var gapX = (scrollWidth - 120*6)/7;
var gapY = (scrollHeight - 120*4)/5;

for(var i=0;i<allImg.length;i++) {
    var row = Math.floor(i/6) + 1;
    var col = i % 6 + 1;
    allImg[i].style.top = row * gapY + (row - 1) * 120 + 'px';
    allImg[i].style.left = col * gapX + (col -1) * 120 + 'px';
    allImg[i].style.transform = 'rotate(' + Math.random()*45 + 'deg)'
    allImg[i].style.transitionDelay = (23 - i) * 100 + 'ms';
}