Widget:Waterfalls

<script>(window.RLQ = window.RLQ || []).push(['jquery', () => { let data = eval($('#waterfallsData').text())

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

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

let img = document.createElement('img') img.src = data[i].src

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

let link = document.createElement('a') link.innerHTML = data[i].text link.href = data[i].link let width = $('#content').width() if(width<700){ link.className = "a_tel" } else{ link.className = "a_text" }

a_img.appendChild(img) item.appendChild(a_img)

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

box.appendChild(item) }

let maxHeight = 0;

function waterFall() { // 1 确定图片的宽度 - 滚动条宽度 let pageWidth = $('#content').width()-50 console.log('width:'+pageWidth) let columns = 4; //4列 let itemWidth = parseInt(pageWidth/columns); //得到item的宽度 $(".item").width(itemWidth); //设置到item的宽度 let arr = []; $(".box .item").each(function(i){ let height = $(this).find("img").height() + $(this).find('.text').height(); $(".item").height(height)//设置到item的高度 if (i < columns) { // 2 第一行按序布局 if (pageWidth < 700) { $(this).css({ top:0, left:(itemWidth) * i+15*i, }); } else{ $(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]+10, left:$(".box .item").eq(index).css("left") });

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

//初始化 waterFall(); box.style.cssText = `height: ${maxHeight}px`

function fn() { waterFall(); box.style.cssText = `height: ${maxHeight}px` }

setTimeout(fn, 600)

window.onresize = function() { waterFall(); box.style.cssText = `height: ${maxHeight}px` } }]); </script>