原生js的瀑布流怎么做，如何用原始js做一个瀑布流效果

本文链接：https://blog.csdn.net/jiang7701037/article/details/78926715

效果图：

思路：

//瀑布流：
//前提：每张图片的宽度一样，高度不一定相同，如：width；
//思路：
//1、明确总列数：可视区域的宽度除以每张图片的宽度取整；如：totalcolumn = parseInt(clientWidth/width);
//2、计算列与列之间的间隔：可视区域宽度取余每张图片的宽度除以（总列数+1）。如：spaceWidth=clientWidth%width/(totalColumn+1);
//3、每列图片的left：
// 1)、用总列数取余图片序号的方式来获取列号(column)，如：总列数是8，那么第10张就是第二列；
// 2)、用列号减一乘以图片的宽度就是当前图片的left。如：left = (column-1)*width;
// 3)、如果有间隔，则在上一步基础上再加上列号*间隔，如：left = (column-1)*width+column*spaceWidth;
//4、每张图片的top
// 1)、由一个数组来记录来记录当前列的图片高度。如：arr
// 2)、每张图片的top等于数组中对应下标（列号-1）的值，
// 3)、当把图片放在页面上时，修改数组中对应下标（列号-1）的值为原来的值加上当前图片的高度。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}

</style>
</head>
<body>

</body>
</html>
<script type="text/javascript" src="tools/util.js"></script>
<script type="text/javascript">

//由于offsetHeight属性，必须要等到图片出现界面上才能获取，所以，需要把放置图片和设置图片的left和top分开

//每张图片的宽度：150
let width = 150;
//产生图片；并添加到body里
function addPic(){
for(let i=0;i<70;i++){
//2、创建img标记，添加到页面上
let imgDom = document.createElement("img");
imgDom.src = "img/"+(i+1)+".jpg";
imgDom.style.cssText="position:absolute;width:"+width+"px;";
document.body.appendChild(imgDom);
}
}

//动态改变每张图片的left和top
function changeLeftAndTop(){
//1、计算列数（根据可视区域的宽度和每张图片的宽度来计算列数）
let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
let totalColumn = parseInt(clientWidth/width);
//定义一个数组（totalColumn个元素），保存当前列的图片高度
var arr=[];
for(let i=0;i<totalColumn;i++){
arr.push(0);
}
//计算间隔（每一列图片直接的间隔）
let spaceWidth = clientWidth%width/(totalColumn+1);

let imgs = document.getElementsByTagName("img");
for(let i=0;i<70;i++){
//计算列号；
let column = i%totalColumn;
//1、计算left和top
let left = column*width+spaceWidth*(column+1);
let top = arr[column];
//2、获取img，修改left和top
imgs[i].style.left = left+"px";
imgs[i].style.top = top+"px";
//3、改变当前列的高度。
arr[column] = arr[column]+imgs[i].offsetHeight;
}
}

window.onload = function(){
//添加图片
addPic();
//等图片渲染到页面后，再计算每张图片的left和top
let myTimer = setInterval(function(){
let imgs = document.getElementsByTagName("img");
if(imgs[imgs.length-1].offsetHeight>0){
window.clearInterval(myTimer);
changeLeftAndTop();
}
},10);

window.onresize = function(){
changeLeftAndTop();
}
}

</script>