title: js实现瀑布流
date: 2019-09-07 07:32:21
tags: Html
categories:
前端
直接抄代码即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>fall</title> <style> *{ margin: 0; padding: 0; } body{ display: flex; justify-content: space-around; } li{ float: left; list-style: none; margin-right: 10px; width:300px; } .clear::after{ content:''; display: block; height: 0; clear: both; } img{ padding-top: 10px; }
function getData(data){ data = []; for(var i=0; i<9; i++){ data.push("images/fall/"+i+".jpg") } return data; } function getMinHeight(){ const oLi = document.getElementsByClassName("col"); let index = 0; let oH = oLi[index].offsetHeight; for(let i=0; i<oLi.length; i++){ if(oLi[i].offsetHeight <= oH){ index=i; oH = oLi[i].offsetHeight; } } return index; } function appendDom(data){ const container = document.getElementsByClassName("col"); data.forEach((item,index)=>{ const img = new Image(); img.src = item; img.width = 300; // console.log(img) container[getMinHeight()].appendChild(img); }) } const vH = document.documentElement.clientHeight; // 视口高度 document.onscroll = function(){ let sT = document.documentElement.scrollTop || document.body.scrollTop; // 谷歌不同版本的滚动高度 if(sT + vH >= 0.8* document.body.scrollHeight){ // *0.8 的目的是防止出现白块,scrollHeight是元素的css固有高度(包括被父元素挡住的部分) appendDom(getData()) } } appendDom(getData()); </script>