Widget:Waterfal

<script> console.log("success!") let data = [ { src: '涂装商店 神威 暗能 万灵游行.png', text: '涂装商店 神威 暗能 万灵游行.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 丽芙 流光 纺光同尘.png', text: '涂装商店 丽芙 流光 纺光同尘.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 比安卡 真理 天赐恩典.png', text: '涂装商店 比安卡 真理 天赐恩典.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 库洛姆 弧光 旧日回想.png', text: '涂装商店 库洛姆 弧光 旧日回想.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 露西亚 深红之渊 末世绀华.png', text: '涂装商店 露西亚 深红之渊 末世绀华.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 比安卡 真理 春围巡狩.png', text: '涂装商店 比安卡 真理 春围巡狩.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 里 乱数 撷影迷情.png', text: '涂装商店 里 乱数 撷影迷情.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 神威 暗能 扬威虎将.png', text: '涂装商店 神威 暗能 扬威虎将.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 赛琳娜 岚音 宁芙浪谣.png', text: '涂装商店 赛琳娜 岚音 宁芙浪谣.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 露西亚 鸦羽 鳞波沫舞.png', text: '涂装商店 露西亚 鸦羽 鳞波沫舞.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 七实 脉冲 鲨滩嬉戏.png', text: '涂装商店 七实 脉冲 鲨滩嬉戏.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 库洛姆 荣光 长夜魅影.png', text: '涂装商店 库洛姆 荣光 长夜魅影.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 卡列尼娜 烬燃 雪豹之契.png', text: '涂装商店 卡列尼娜 烬燃 雪豹之契.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 露娜 银冕 街头红芒.png', text: '涂装商店 露娜 银冕 街头红芒.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 曲 雀翎 红绡春榭.png', text: '涂装商店 曲 雀翎 红绡春榭.png', link: 'https://wiki.biligame.com/zspms' }, { src: '涂装商店 罗塞塔 凛冽 旌风雪冠.png', text: '涂装商店 罗塞塔 凛冽 旌风雪冠.png', link: 'https://wiki.biligame.com/zspms' } ]

let box = document.getElementById('box') for (let i = 0; i < data.length; i++){ let item = document.createElement('div') item.className = "item"

let img = document.createElement('img') img.src = # // let img = document.createElement('div') // img.innerHTML = `[[file:${data[i].src}|class=img-kk|link=&{data[i].link}]]`

let div = document.createElement('div') div.className = "text"

let link = document.createElement('a') link.innerHTML = data[i].text link.href = data[i].link

item.appendChild(img)

div.appendChild(link) item.appendChild(div)

box.appendChild(item) }

function waterFall() { // 1 确定图片的宽度 - 滚动条宽度 let pageWidth = getClient().width-110; let columns = 5; //5列 let itemWidth = parseInt(pageWidth/columns); //得到item的宽度 $(".item").width(itemWidth); //设置到item的宽度 let arr = []; $(".box .item").each(function(i){ let height = $(this).find("img").height(); if (i < columns) { // 2 第一行按序布局 $(this).css({ top:0, left:(itemWidth) * i+20*i, }); //将行高push到数组 arr.push(height); } else { // 其他行 // 3 找到数组中最小高度 和 它的索引 let minHeight = arr[0]; let index = 0; for (let j = 0; j < arr.length; j++) { if (minHeight > arr[j]) { minHeight = arr[j]; index = j; } } // 4 设置下一行的第一个盒子位置 // top值就是最小列的高度 $(this).css({ top:arr[index]+30,//设置30的距离 left:$(".box .item").eq(index).css("left") });

// 5 修改最小列的高度 // 最小列的高度 = 当前自己的高度 + 拼接过来的高度 arr[index] = arr[index] + height+30;//设置30的距离 } }); }

//clientWidth 处理兼容性 function getClient() { return { width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } }

//初始化 window.onload = function(){ waterFall(); }

// 页面尺寸改变时实时触发 window.onresize = function() { waterFall(); }; </script>