1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
| let column: number; let heightArr: Array<ColumnNode> = []; let containerWidth: number; let initPicNum: number; let gapWidth: number; let projectWidth: number; let isLoading: boolean = false;
interface ColumnNode { height: number; times: number; index: number; }
interface JsonConfig { column: number; containerWidth: number; initPicNum: number; gapWidth: number; }
window.onload = function() { readJsonConfig().then(configText => { let jsonObj: JsonConfig = JSON.parse(configText); initData(jsonObj); justifyBox(containerWidth, column, gapWidth); randomPic(initPicNum, column); }); window.onscroll = function() { let scroll = document.documentElement.scrollTop | document.body.scrollTop; const screenHeight = window.innerHeight; if (document.body.clientHeight < scroll + screenHeight) { randomPic(1 * column, column); } }; };
const initData = (config: JsonConfig): void => { for (var i = 0; i < config.column; i++) { heightArr.push({ height: 0, times: 0, index: i }); } column = config.column; containerWidth = config.containerWidth; initPicNum = config.initPicNum; gapWidth = config.gapWidth; };
const readJsonConfig = (): any => { return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest(); xhr.open('get', './config.json'); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { resolve(xhr.responseText); } else { alert('读取配置失败'); } } }; }); };
const paintInitPic = (arr: Array<number>, projectWidth: number, gapWidth: number): void => { heightArr.sort((item1: any, item2: any) => { return item1.height - item2.height; }); let container: any = document.querySelector('.container'); arr.forEach((item, index) => { let box: any = document.createElement('div'); box.className = 'box'; box.style.height = item + 'px'; box.innerHTML = `${projectWidth} x ${item}`; box.style.width = projectWidth + 'px'; box.style.left = (projectWidth + gapWidth) * heightArr[index].index + 'px'; box.style.top = heightArr[index].height + gapWidth * heightArr[index].times + 'px'; heightArr[index].height += item; heightArr[index].times++; container.appendChild(box); }); container.style.height = Math.max(...heightArr.map(item => item.height)) + 'px'; };
const randomPic = (picNum: number, columns: number): void => { let arr: Array<Array<number>> = []; let randomArr: Array<number> = []; for (let i: number = 0; i < picNum; i++) { randomArr.push(randomNum(200, 400)); } while (randomArr.length > 0) { arr.push(randomArr.splice(0, columns)); } arr.forEach(arr => { paintInitPic(arr, projectWidth, gapWidth); }); };
const randomNum = (min: number, max: number): number => { return Math.round(Math.random() * (max - min) + min); };
const justifyBox = (containerWidth: number, columns: number, gapWidth: number): void => { let container: any = document.querySelector('.container'); container.style.width = containerWidth + 'px'; const gap: number = columns - 1; const itemWidth = (containerWidth - gap * gapWidth) / columns; projectWidth = itemWidth; Array.prototype.forEach.call(container.children, function(item) { item.style.width = itemWidth + 'px'; }); };
|