瀑布流：瀑布流式布局（网站布局方式的一种）视觉上表现为参差不齐的多栏布局。应用领域为：电商导购、兴趣图分享等页面；其特点为琳琅满目、唯美、操作简单等特点；布局优点为有效的降低页面复杂度、节省空间；交互方式更符合直觉；更高的参与度，以上两点带来的交互便捷性，可以使用户侧重于内容而不是操作上。关于瀑布流的具体操作以云南●十八怪为例详细代码如下：
<!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>瀑布流</title>
<style>
/* 消除自带样式 */
*{
margin: 0;
padding: 0;
border: none;
}
img{
border: none;
}
a{
text-decoration: none;
color: #444444;
}
a:hover{
color: lightslategray;
}
body{
background: rgb(223, 221, 221);
}
/* wrap区域 */
#wrap{
width: auto;
height: auto;
margin: 0 auto;
}
#wrap >div{
width: 280px;
padding: 10px;
margin: 10px;
background: #ffffff;
border-radius:5px;
box-sizing: border-box;
float: left;
}
#wrap >div>img{
width: 100%;
height: 100%;
display: block;
}
#wrap >div> a{
line-height: 45px;
text-align: center;
display: block;
}
</style>
<script>
function waterfall(boxes,wrap){
// 一个div盒子的宽度
var boxWidth=boxes[0].offsetWidth +20;
//windw的宽度
var windowWidth=document.documentElement.clientWidth;
//一列几行
var closNum=Math.floor(windowWidth/boxWidth);
// 改变wrap宽度
wrap.style.width=boxWidth*closNum +'px';
//通过新建一个数组来存储每列图片的高度，并在每列高度中找到图片高度最小值（从小到大）来依次放置图片，形成参差不齐的图片布局样式
// 定义数组存储每列高度
var everyHeight=new Array();
//循环所有盒子
for(var i=0;i<boxes.length;i++){
if(i<closNum){ //当i<列数时执行如下代码
//盒子高度 数组长度=列数
everyHeight[i]=boxes[i].offsetHeight +20;
}else{//i>=列数时执行如下代码
//最小高度 apply（）内键函数
var minHeight=Math.min.apply(null,everyHeight);
// 最小高度下标
var minIndex=getIndex(minHeight,everyHeight);
//左边距
var leftValue=boxes[minIndex].offsetLeft-10;
//设置绝对定位样式
boxes[i].style.position='absolute';
boxes[i].style.top=minHeight +'px';
boxes[i].style.left=leftValue +'px';
// 两个图片的高度相加依次类推
everyHeight[minIndex]+=boxes[i].offsetHeight+20;
};
};
};
//获取最小列下标
function getIndex(minHeight,everyHeight){
for(index in everyHeight){
if(everyHeight[index] == minHeight){
return index;
}
}
};
//检测是否具备了滚动条加载数据块的条件
function checkScrollSlide(){
//获取对象
var wrap=document.getElementById('wrap');
var boxes=wrap.getElementsByTagName('div');
//最后一个盒子距离顶部的高度+最后一个盒子高度的一半
var lastBoxH=boxes[boxes.length-1].offsetTop+Math.floor(boxes[boxes.length-1].offsetTop/2);
//页面滚走的距离分为混杂模式（使用body元素检测）和标准模式（htm元素检测）
var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
//当前浏览器可视窗口距离
var windowHeight=document.body.clientHeight || document.documentElement.clientHeight;
return (lastBoxH<screenTop+windowHeight)?true:false;
}
window.onload=function(){
//获取对象
var wrap=document.getElementById('wrap');
var boxes=wrap.getElementsByTagName('div');
// 调用函数
waterfall(boxes,wrap);
// -----------------------------滚动条加载数据----------------------------------------------------------------
//模拟json数据
var dataInt={'data':[
{"src":'1.png'},
{"src":'2.png'},
{"src":'3.png'},
{"src":'4.png'},
{"src":'5.png'}
],'text':[
{'txt':'第一怪●竹筒当烟袋'},
{'txt':'第二怪●草帽当锅盖'},
{'txt':'第三怪●这边下雨那边晒'},
{'txt':'第四怪●四季服装同穿戴'},
{'txt':'第五怪●火车没有汽车快'}
]};
//拖动滚动条所触发的事件
window.onscroll=function(){
if(checkScrollSlide){
var wrap=document.getElementById('wrap');
//将数据块渲染到页面尾部
//遍历json数据
for(var i=0;i<dataInt.data.length;i++){
//渲染：将数据放到什么位置
//创建div
var createDiv=document.createElement('div');
//创建img标签
var creatImg=document.createElement('img');
//图片路径
creatImg.src="images/"+dataInt.data[i].src;
//appendChild将一个元素插入到父元素底部
wrap.appendChild(createDiv);
//将图片插入父元素上
createDiv.appendChild(creatImg);
//创建a标签
var creatA=document.createElement('a');
//a标签的内容
//给a添加herf属性
creatA.setAttribute('href','https://www.imooc.com/');
creatA.innerHTML=dataInt.text[i].txt;
createDiv.appendChild(creatA);
};
// 再次调用waterfall函数来计算图片
waterfall(boxes,wrap);
}
}
}
</script>
</head>
<body>
<div id="wrap">
<div><img src="images/1.png" ><a href="https://www.imooc.com/">第一怪●竹筒当烟袋</a></div>
<div><img src="images/2.png" ><a href="https://www.imooc.com/">第二怪●草帽当锅盖</a></div>
<div><img src="images/3.png" ><a href="https://www.imooc.com/">第三怪●这边下雨那边晒</a></div>
<div><img src="images/4.png" ><a href="https://www.imooc.com/">第四怪●四季服装同穿戴</a></div>
<div><img src="images/5.png" ><a href="https://www.imooc.com/">第五怪●火车没有汽车快</a></div>
<div><img src="images/6.png" ><a href="https://www.imooc.com/">第六怪●火车不通国内通国外</a></div>
<div><img src="images/7.png" ><a href="https://www.imooc.com/">第七怪●老奶爬山比猴快</a></div>
<div><img src="images/8.png" ><a href="https://www.imooc.com/">第八怪●鞋子后面多一块</a></div>
<div><img src="images/9.png" ><a href="https://www.imooc.com/">第九怪●脚趾四季露在外</a></div>
<div><img src="images/10.png" ><a href="https://www.imooc.com/">第十怪●鸡蛋拴着卖</a></div>
<div><img src="images/11.png" ><a href="https://www.imooc.com/">第十一怪●粑粑叫饵块</a></div>
<div><img src="images/12.png" ><a href="https://www.imooc.com/">第十二怪●花生蚕豆数着卖</a></div>
<div><img src="images/13.png" ><a href="https://www.imooc.com/">第十三怪●三个蚊子一盘菜</a></div>
<div><img src="images/14.png" ><a href="https://www.imooc.com/">第十四怪●四个竹鼠一麻袋</a></div>
<div><img src="images/15.png" ><a href="https://www.imooc.com/">第十五怪●树上松毛扭着卖</a></div>
<div><img src="images/16.png" ><a href="https://www.imooc.com/">第十六怪●姑娘叫老太</a></div>
<div><img src="images/17.png" ><a href="https://www.imooc.com/">第十七怪●小和尚可以谈恋爱</a></div>
<div><img src="images/18.png" ><a href="https://www.imooc.com/">第十八怪●背着娃再恋爱</a></div>
</div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。