如何实现瀑布流排列效果？看下面这张图
通过js去比较每张图片的高度，然后进行排列。
这是一个模拟的瀑布流的list列表项
<div id="main"> <div class="box"> <a href="#" class="pic"> <img src="./images/dangjian-list/1.png"> <div class="zpic"> <h1>南辰</h1> <p>2022-06-04</p> </div> </a> </div> </div>
样式如下：
* { margin: 0px; padding: 0px; box-sizing: border-box; } .box { padding: .05rem; float: left; margin-top: 1.7rem; } .pic { display: block; float: left; } /*将承载图片的容器定制颜色及边框大小和圆角*/ .boximg .box-text{ width: 3.55rem; height: 1.58rem; background-color: #E9E9E9; padding-top: .24rem; box-sizing: border-box; } /*定制图片尺寸*/ .boximg { margin-top: .1rem; } .boximg h4{ /* text-align: center; */ margin-left: .3rem; /* margin-top: .24rem; */ margin-bottom: .06rem; color: #000000; font-size: .3rem; font-weight: 500; line-height: .36rem; } .boximg p{ margin-left: .3rem; color: #929292; font-size: .24rem; line-height: .36rem; } .boximg img { width: 3.55rem; height: auto; } .boximg h4{ width: 3.05rem; }
<script type="text/javascript"> window.onload = function () { waterfall('main', 'box'); dataImg = { arr: [ { 'src': './images/dangjian-list/1.png', 'name': '2021', 'date': '2022-03-21','href':'#' }, { 'src': './images/dangjian-list/2.png', 'name': '打造更有温度、深度和厚度的医院文化', 'date': '2022-03-21','href':'#' }, { 'src': './images/dangjian-list/3.png', 'name': '打造更有温度、深度和厚度的医院文化', 'date': '2022-03-21','href':'#' }, { 'src': './images/dangjian-list/4.png', 'name': '打造更有温度、深度和厚度的医院文化', 'date': '2022-03-21','href':'#' }, { 'src': './images/dangjian-list/5.png', 'name': '打造更有温度、深度和厚度的医院文化', 'date': '2022-03-21' ,'href':'#'}, { 'src': './images/dangjian-list/6.png', 'name': '打造更有温度、深度和厚度的医院文化', 'date': '2022-03-21' ,'href':'#'}, { 'src': './images/dangjian-list/7.png', 'name': '打造更有温度、深度和厚度的医院文化', 'date': '2022-03-21' ,'href':'#'}, ], }, window.onscroll = function () { //当滚动到最后一张图片高度一般时刷新新数据 var boxs = getClass('box'); var oneh2 = boxs[boxs.length - 1].offsetTop; var oneh = boxs[boxs.length - 1].offsetHeight / 2; var top = document.body.scrollTop || document.documentElement.scrollTop; var twoh = document.body.clientHeight || document.documentElement.clientHeight; if (oneh2 + oneh < top + twoh) { for (var i = 0; i < dataImg.arr.length; i++) { var main = document.getElementById('main'); var cdiv = document.createElement('div'); var cpic = document.createElement('a'); // 新增动态链接 cpic.setAttribute('href', dataImg.arr[i].href); var zpic = document.createElement('div'); cdiv.className = 'box'; cpic.className = 'pic'; zpic.className = 'zpic' var cimg = document.createElement('img'); var h1 = document.createElement('h1'); var date = document.createElement('p'); cimg.src = dataImg.arr[i].src; h1.innerText = dataImg.arr[i].name date.innerText = dataImg.arr[i].date; // h1.innerText = dataImg.arr[i].text; console.log(dataImg.arr[i]); main.appendChild(cdiv); cdiv.appendChild(cpic); cpic.appendChild(cimg); cpic.appendChild(zpic); zpic.appendChild(h1) zpic.appendChild(date); zpic.style.backgroundColor = '#E9E9E9' console.log(zpic); /* for (let j = 0; j < txt.text.length; j++) { // console.log(txt.text); var h1 = document.createElement('h1'); h1.innerText = txt.text[j].name; console.log(txt.text[j]); console.log(cpic); cpic.className = 'pic'; cpic.appendChild(h1); } */ } } waterfall('main', 'box'); } } function waterfall(parent, box) { //获取main元素 var oparent = document.getElementById(parent); //获取所有 box 元素 var obox = getClass('box'); //获取每行能放多少个 居中摆放 var w = document.body.clientWidth || document.documentElement.clientWidth; //var w =1000; var oneWidth = obox[0].offsetWidth; var num = Math.round(w / oneWidth); // 这里判断一下屏幕如果是奇数的话就减去一个像素，否则总宽度会被+1 if (w % 2 == 1) { main.style.width = num * oneWidth - 1 + 'px'; } else { main.style.width = num * oneWidth + 'px'; } // console.log(oneWidth); console.log(num); console.log(obox); //瀑布流原理 left-下标*图片width top-上面图片高 var hrr = []; for (var i = 0; i < obox.length; i++) { if (i < num) { hrr.push(obox[i].offsetHeight); } else { var min = Math.min.apply(null, hrr); var index = getindex(hrr, min); obox[i].style.position = 'absolute'; obox[i].style.left = index * oneWidth + 'px'; obox[i].style.top = min + 'px'; hrr[index] += obox[i].offsetHeight; } } console.log(hrr); } //获取 数组内指定值的 序号 function getindex(hrr, h) { for (var i = 0; i < hrr.length; i++) { if (hrr[i] == h) { return i; } } } //统计所有指定class名称的元素 function getClass(a) { var doms = document.getElementsByTagName('*'); var reg = new RegExp('\\b' + a + '\\b'); //var reg = '/^\b'+a+'\b$/'; var arr = []; for (var i = 0; i < doms.length; i++) { if (reg.test(doms[i].className)) { arr.push(doms[i]); } } return arr; } </script>
动态添加a标签的方法使用setAttribute:("属性":"名称")
var cpic = document.createElement('a'); // 新增动态链接 cpic.setAttribute('href', dataImg.arr[i].href);
