瀑布流

1、什么是瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

瀑布流布局分为固定列和非固定列。

2、如何实现

原理：每次往最短的Li中添加数据。

3、小实例（小在服务器环境下运行）

1.布局
html代码：

可以先往页面中添加一些内容方便布局。
CSS

2.数据分析
（1）如何获取最短的li
【9,3,5,6,2,4,7】
假如我们要从上面的数字中获取到最小的一个数字所在的位置
那我先定义n=0，min=9
将9与3进行对比，3比9小，我们把n赋值为1（3所在的位置），min=3，以此类推。
获取最短的li同样可以使用此方法

function getShort() {
    var index = 0;
    var ih = aLi[index].offsetHeight;
    for (var i = 1; i < aLen; i++) {
        if (aLi[i].offsetHeight

最后返回的索引值便是我们想得到的最短的那个li

3.初始JS代码如下

其实不写宽高数据也可以被正常加载过来，但是这么写的话有一个问题，就是可能到后面所有的图片全都加载在一列，因为图片撑开是需要时间的，在它还没撑开高度前，都会被认为是最短的一列li，for循环会一直进行。
封装的ajax函数

function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    
    if (method == 'get' && data) {
        url += '?' + data;
    }
    
    xhr.open(method,url,true);
    if (method == 'get') {
        xhr.send();
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }
    
    xhr.onreadystatechange = function() {
        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                success && success(xhr.responseText);
            } else {
                alert('出错了,Err：' + xhr.status);
            }
        }
    };
}

现在数据正常加载，图片格式也是正常的，但是拉完一页就到头了，我们还需要让数据能够不停的被加载进来。
4.如何继续加载数据
什么时候加载？
任何一个li的底部进入到可视区范围内，数据就可以加载下一列了。
条件：li的top值+li自身的高<滚动条滚动的值+可视区的高

完整代码：

后果想要做的好看一点的话就加上加载动画~