@H_404_0@瀑布流也应该算是流行几年了吧。首先是由Pinterest掀起的浪潮，然后国内设计如雨后春笋般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不过最近涉黄，好像被喝茶了),还有淘宝的 “哇哦”. 这些都是很棒的例子， 今天我想重新谈起瀑布流，一是想满足我自己的愿望，写一个详细的介绍(不敢自名为教程),二是，给大家一份参考，因为search很多，但是他们给的是一个插件，然后教你怎样配置，当然，也有很多其他的大神也细心的做了很多教程，比如 imooc上面 Amy 姐姐 发布的瀑布流教程，也是很棒的。 而我的目的就是，尽量把一些常见的demo给大家讲解一遍，以及，融合以前学过的设计模式，相当于一个简单的demo.

@H_4040@

绝对式布局

@H4040@不多说，先看一个demo

@H404_0@js

<div class="jb51code">
<pre class="brush:js;">
var cal = (function() {
"use strict";
var $ = function() {
return document.querySelectorAll.apply(document,arguments);
}
var arrHeight = []; //得到分列的高度
var columns = function() { //计算页面最多可以放多少列
var bodyW = document.body.clientWidth,pinW = $(".pin")[0].offsetWidth;
return Math.floor(bodyW / pinW);
}
var getIndex = function(arr) { //获得最小高度的index
var minHeight = Math.min.apply(null,arr); //获得最小高度
for (var i in arr) {
if (arr[i] === minHeight) {
return i;
}
}
}
//根据列数确定第一排img的高度并放入数组当中。
var setWidth = function() { //通过列数设置宽度
var col = columns(),//获得最后一列
main = $('#main')[0]; //获得罩层
main.style.width = col * $('.pin')[0].offsetWidth + "px";
}
var overLoad = function(ele) {
var index = getIndex(arrHeight),minHeight = Math.min.apply(null,arrHeight),//获取最小高度
pins = $('.pin'),style = ele.style;
style.position = "absolute";
style.top = minHeight + "px"; //设置当前元素的高度
style.left = pins[index].offsetLeft + "px";
arrHeight[index] += ele.offsetHeight;
}
var init = function() {
var pins = $(".pin"),col = columns();
setWidth(); //设置包裹容器的宽度
for (var i = 0,pin; pin = pins[i]; i++) {
if (i < col) { //存储第一排的高度
arrHeight.push(pin.offsetHeight);
} else {
overLoad(pin); //将元素的位置重排
}
}
}
window.onload = init;
//...执行自动更新操作。
//添加当，滚动到一定位置的时候，添加html节点.
//得到最低高度和序号,获得临界位置
//模仿加载数据
var dataInt = [{
'src': '1.jpg'
},{
'src': '2.jpg'
},{
'src': '3.jpg'
},{
'src': '4.jpg'
},{
'src': '1.jpg'
},{
'src': '4.jpg'
}];

function isLoad() { //是否可以进行加载
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,point = scrollTop + wholeHeight; //页面底部距离header的距离
var arr = $('.pin');
var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
return (lastHei < point) ? true : false;
}
var dealScroll = (function() {
var main = $('#main')[0],flag = true;
return function() {
console.log("trigger");
if (isLoad() && flag) {
for (var i = 0,data; data = dataInt[i++];) {
var div = document.createElement('div');
div.innerHTML = temp(data.src);
div.className = "pin";
main.appendChild(div);
overLoad(div); //和上面的overload有耦合性质
}
flag = false;
setTimeout(function() { //控制滑行手速，时间越长对速度的滑动时间影响越大。
flag = true;
},1000);
}
}
})();
window.addEventListener('scroll',function() {
dealScroll();
},false);

function temp(src) {
return `
<div class="Box">
<img src="http://cued.xunlei.com/demos/publ/img/P_00${src}"/&gt;