所谓瀑布流，就是图片分几列有规律的排列，但是这里的排列是有要求的，普通的浮动布局会使图片与图片之间有很多的空隙，这个是非常烦人的啊，所以我们就可以使用定位布局。
一最简单版的
大致原理就是用几个容器包住我么你的图片，容器之间的距离设置好，的宽度或者高度有一个和容器一样，这样就实现了一个坐标轴的规范化了
另一个方向要求我们始终向当前内容最短的那个里面插入，这时候我们既要不断的计算那个是最短的
可以使用 offsetWidth 和offsetHeight 来计算宽和高
这里需要特殊说明，图片的尺寸是浏览器渲染之后才有的所以就要借用 img.onload 这个事件 在图片加载之后获取我们想要的宽度和高度
如果有图片预加载处理这里可以直接获取
获取到的数值怎么处理呢，怎么能一直的记住呢，就要用到数组了，数组的下标对应所在的列数 最开始让数组里面的值都是零，每次向容器里面插入之后就可以让数组对应下标的值增大，用循环找到数组里面的最小的值，就是我们想要向里面插入东西的那个容器了，这样对应起来非常的方便；
缺点：局限性太大了，不能响应式 层级太多 插入的尾端不是对齐的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
#box{padding: 20px;width: 1200px;border: 1px solid black;margin: 50px auto;display: flex;justify-content: space-around;align-items: start;}
.item{width: 200px;background-color: gray;font-size: 50px;margin-bottom: 10px;text-align: center;color: white;}
ul{width: 200px;list-style: none;margin: 0;padding: 0;border: 1px solid red;}
</style>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
<script>
var box = document.getElementById('box');
var uls = document.getElementsByTagName('ul');
for(var i=0;i<20;i++){
var item = document.createElement('div');
item.className= 'item';
item.innerHTML = i+1;
var height = parseInt(Math.random()*300+100);
item.style.height = height+'px';
item.style.lineHeight = height+'px';
if(i<5){
uls[i].appendChild(item);
}else{
uls[min()].appendChild(item);
}
}
// 找最小高度的函数
function min(){
var num = 0;
for(var i =0;i<uls.length;i++){
if(uls[num].clientHeight>uls[i].clientHeight){
num = i;
}
}
return num;
}
</script>
</html>
二 动态插入（不能响应式）
大致原理 ： 动态创建一个 img 元素 var img = new image（）；
设置 img的路径 然后 向盛放img的容器插入图片
这里不使用容器来限制图片 这是 根据当前窗口能放下几列图片来 计算
我们可以设置一个变量 用来设置 图片与图片之间的距离
然后把每张图片的宽度 理解为 事件宽度加上 这个距离 就会使所有的图片在一个方向上有相同的距离了
这里我们依旧要用一个数组来保存那一列的总高度是最小的，但是这里面这个数组的长度，就决定了有几列
比如向下排布的瀑布流，定位的left 就是 上面所说的总宽度（宽度加上距离）乘以数组的下表就可以了
定位的top：值开始应该用一个循环都设置为零 然后一直累加当前插入元素的高度，在下一次插入之前要比较那一列的总高度是最小的，就像其里面插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流定位板</title>
<style>
body{margin: 0;padding: 0;}
#warp{position: relative;}
#warp div{width: 200px;font-size: 50px;color: white;background-color: #368;text-align: center;transition: all .5s;position: absolute;}
</style>
</head>
<body>
<div id="warp"></div>
</body>
<script>
var warp = document.getElementById('warp');
var width = 200;
var padding = 10 ;
//随机函数
function randomFn(min,max){
return parseInt(Math.random()(max-min))+min;
}
createDiv();
function createDiv(){
// 激素奥有几列
var windowBody = document.documentElement.clientWidth;
var num = parseInt(windowBody / 200);
var topArr =[];
for(var i =0;i<num;i++){
topArr[i] = 0;
}
for(var i=0;i<20;i++){ //控制插入的个数
var div = document.createElement('div');
var height = randomFn(150,400);
div.innerHTML = i;
div.style.height = height + 'px';
var number = 0; //用来 存放最小高度的变量
var minTop = topArr[0];
for(var j=0;j<num;j++){
if(minTop>topArr[j]){
minTop = topArr[j];
number = j;
}
}
div.style.top = topArr[number] + 'px';
div.style.left = number(width + padding) + 'px';
topArr[number] += height + padding;
warp.appendChild(div);
}
}
</script>
</html>
三响应式
插入的原理和上面的第二种方法一样，就是利用一个时间 window.onresize 窗口的尺寸发生改变的时候重新的布局
就可以的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流定位布局响应式</title>
<style>
body{
margin: 0;
padding: 0;
}
#warp{
position: relative;
}
#warp div{
width: 200px;
font-size: 50px;
color: white;
background-color: #368;
text-align: center;
transition: all .5s;
position: absolute;
/* padding: 10px; /
}
</style>
</head>
<body>
<div id="warp"></div>
</body>
<script>
var warp = document.getElementById('warp');
var width = 200;//div宽度
var padding = 10 ; //div间距
var all = 40; // 插入div的个数
//随机函数
function randomFn(min,max){
return parseInt(Math.random()(max-min))+min;
}
createDiv();
function createDiv(){
// 激素奥有几列
var windowBody = document.documentElement.clientWidth;
var num = parseInt(windowBody / 200);
var topArr =[];
for(var i =0;i<num;i++){
topArr[i] = 0;
}
for(var i=0;i<all;i++){ //控制插入的个数
var div = document.createElement('div');
var height = randomFn(150,400);
div.innerHTML = i;
div.style.height = height + 'px';
var number = 0; //用来 存放最小高度的变量
var minTop = topArr[0];
for(var j=0;j<num;j++){
if(minTop>topArr[j]){
minTop = topArr[j];
number = j;
}
}
div.style.top = topArr[number] + 'px';
div.style.left = number(width + padding) + 'px';
topArr[number] += height + padding;
warp.appendChild(div);
}
}
// 页面串口发生变化时触发
window.onresize = function(){
var divs = warp.children;
var windowBody = document.documentElement.clientWidth;
var num = parseInt(windowBody / 200);
var topArr =[];
for(var i =0;i<num;i++){
topArr[i] = 0;
}
for(var i=0;i<all;i++){
var number = 0; //用来 存放最小高度的变量
var minTop = topArr[0];
for(var j=0;j<num;j++){
if(minTop>topArr[j]){
minTop = topArr[j];
number = j;
}
}
divs[i].style.top = topArr[number] + 'px';
divs[i].style.left = number(width + padding) + 'px';
topArr[number] += divs[i].offsetHeight + padding;
}
}
</script>
</html>
图片的预加载
图片相对于我们的代码渲染来说是很大的，尤其是网速不好的时候，卡的不行啊。这时候我们就可以让所有的图片在程序的执行之前加载好，这样程序的执行就非常的流畅了，用户的体验那就更棒了。
具体的原理呢，就是床建一个数组，把所有我们需要的图片动态的插入到数组里面，又去JavaScript使用的是垃圾回收机制，这就导致了一旦堆区的内存在栈区没有了指向就会被回收，加载的就白扯了
什么算是加载呢，就是图片制定了一个src 图片就开始加载了 什么时候加载好了呢 就可以用 img.onload 来监听
怎么想数组里面插入呢，最简单的就是利用咱们的for循环了 加载多少个图片就执行多少次 ，很方便的
这样我们在使用上面加载好的src的时候就是瞬间的展示出来了，不会有延迟和卡顿的现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 830px;
border: 1px solid black;
position: relative;
}
.box div{
width: 200px;
position: absolute;
background-color: #333;
color: white;
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.getElementsByClassName('box')[0];
var heightArr = [0,0,0,0];
for(var i=0;i<20;i++){
var div = document.createElement('div');
div.style.height = parseInt(Math.random()*100+50) + 'px';
div.innerHTML = i;
var minIndex = 0;
for(var j=1;j<heightArr.length;j++){
if(heightArr[minIndex]>heightArr[j]){
// heightArr[minIndex] = heightArr[j];
minIndex = j;
}
}
div.style.left = minIndex * (210) + 'px';
div.style.top = heightArr[minIndex] + 'px';
box.appendChild(div);
heightArr[minIndex] += (div.offsetHeight + 10);
}
</script>
</html>
