瀑布流：瀑布流式规划（网站规划体式格局的一种）视觉上表现为良莠不齐的多栏规划。应用领域为：电商导购、兴致图分享等页面；其特性为美不胜收、唯美、操纵简朴等特性；规划长处为有用的下降页面复杂度、节约空间；交互体式格局更相符直觉；更高的介入度，以上两点带来的交互便利性，能够运用户侧重于内容而不是操纵上。关于瀑布流的具体操纵以云南●十八怪为例细致代码以下：
<!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>