瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面[滚动条]向下滚动，这种布局还会不断加载[数据块]并附加至当前尾部。最早采用此布局的网站是[Pinterest]，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
1特点
1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。
瀑布流效果2、唯美：图片的风格以唯美的图片为主。3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。
2应用
瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳，同时给人以不拘一格的感觉，切中年轻一族的个性化心理。[1]国内类Pinterest网站也如雨后春笋般出现，已知网站超40家，类Pinterest网站有四种，一是电商导购，如想去网、蘑菇街和美丽说、好享说、依托于淘宝平台;二是兴趣图谱分享，如知美、花瓣等;三是在细分垂直领域，如针对吃货的零食控、针对家居行业的他部落等。四是服装款式设计资讯平台如看潮网等等。
3优缺点
布局优点
- 有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。
- 对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。
- 更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。
布局缺点
1. 有限的用例：
无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
代码部分
利用offsetheight,scrolltop来判断，判断offsetwidth可以放置的照片数量，图片的宽度是固定的，但是高度是随机的，第二排图片排列的的方式是找到高度最小的那张图片下面，利用定位然后依次排列。
window.onscroll = function () {
var str = ''
if (geth()) {
for (var j in datas) {
str += `
<div class="box">
<div class="srcs">
<img src="${datas[j].img}" alt="">
</div>
</div>`
}
wrapper.innerHTML += str
getThing();
}
}
getThing()
function getThing() {
var html_w = document.documentElement.clientWidth || document.body.clientWidth;
var boxs = document.querySelectorAll('.box');
// console.log(boxs)
var img_w = boxs[0].offsetWidth;
var num = Math.floor(html_w / img_w);
var arr = []
wrapper.style.width = img_w * num + 'px';
for (var i = 0; i < boxs.length; i++) {
if (i < num) {
arr.push(boxs[i].offsetHeight)
} else {
var min_H = Math.min.apply(Math, arr);
console.log(min_H);
var ind = arr.indexOf(min_H);
boxs[i].style = ` position: absolute;left:${ind*img_w}px;top:${min_H}px;`
arr[ind] += boxs[i].offsetHeight;
}
}
}
function geth() {
var boxs = document.querySelectorAll('.box')
var h = document.documentElement.clientHeight || document.body.clientHeight;
var top = h + document.documentElement.scrollTop || document.body.scrollTop;
var last_h = boxs[boxs.length - 1].offsetTop + boxs[boxs.length - 1].clientHeight/2;
// console.log(last_h,h,top)
return top > last_h ? true : false;
}
}
