js原生瀑布流

瀑布流原理

先看个实例：http://sc.chinaz.com/jiaobendemo.aspx?downloadid=201525352666
瀑布瀑布就是像瀑布一样，不过和瀑布不一样的是可以有多咧，每一列的宽度必须相同。在排列时从左往右排列，第一行排满之后，排列第二行时不在从左往右排列，而是找第一行高度最低的，并排在其下面。

js：原理

先获取网页和每列的宽度，算出一行可以放多少列，接着定义一个数组存储第一行每张图片的高度，在超出最大列数则找出数组中最小的数，并找出其位置，紧接着放下一张图片则要根据找出最小数的位置来算出左边和上边的距离，这样就可以成功防置图片。

var box = document.getElementById('box');
var k1 = box.getElementsByClassName('k1');
function fn1(){
    var lw = k1[0].offsetWidth;
    var ls = Math.floor(document.documentElement.clientWidth / lw);
    var h = [];
    box.style.width = lw *ls +'px';
    box.style.marginLeft = 'auto';
    box.style.marginRight = 'auto';
    for(var i = 0; i<k1.length;i++){
        if(i<ls){
            h[i] = k1[i].offsetHeight;
        }else {
            var lmin = Math.min.apply(null,h);
            var count = fn2(lmin,h);
            k1[i].style.position = 'absolute';
            k1[i].style.top = lmin + 'px';
            k1[i].style.left = k1[count].offsetLeft + 'px';
            h[count] += k1[i].offsetHeight;
        }
    }
}
fn1();
function fn2(num,num1){
    for(var x in num1){
        if(num1[x] == num){
            return x;
        }
    }
}
window.onscroll = function(){
    var h1 = document.body.scrollTop;
    var h2 = document.documentElement.clientHeight;
    var h3 = k1[k1.length - 1].offsetTop;
    var photo={"data":[{"src":'i1/18.jpg'},{"src":'i1/21.jpg'},{"src":'i1/11.jpg'},{"src":'i1/4.jpg'},{"src":'i1/1.jpg'},{"src":'i1/2.jpg'},{"src":'i1/3.jpg'},{"src":'i1/4.jpg'}]};
    if(h3 <h1+h2 ){
        for (var i = 0; i < photo.data.length; i++) {
            path= photo.data[i].src;
            var div = document.createElement('div');
            box.appendChild(div);
            div.className = 'k1';
            div.innerHTML = '<img src="'+path+'">';
        }
        fn1();
    }
}
window.onresize = function(){
    window.location.reload();
    fn1();
}
function t(){
    window.location.reload();
    setTimeout(t,1000);
}

在实现无限加载（计算方式可以在想想更好的方法）以及网页宽度变化时有一些小问题（代码中用了刷新解决）