瀑布流布局

js瀑布流布局

html

js

window.onload = function () {
    waterfall('main', 'box');
    var dataInt = {'data': [{'src': '1.jpg'}, {'src': '2.jpg'}, {'src': '3.jpg'}, {'src': '4.jpg'}]};

    window.onscroll = function () {
        if (checkscrollSide) {
            var oParent = document.getElementById('main');
            //将数据块渲染到当前页面的尾部
            for (var i = 0; i < dataInt.data.length; i++) {
                var oBox = document.createElement('div');
                oBox.className = 'box';
                oParent.appendChild(oBox);
                var oPin=document.createElement('div');
                oPin.className='pin';
                oBox.appendChild(oPin);
                var oImg=document.createElement('img');
                oImg.src='./images/'+dataInt.data[i].src;
                oBox.appendChild(oImg);
            }
            waterfall('main', 'box');
        }
    }
}

function waterfall(parent, box) {
    //将main下的所有class为box的元素取出来
    var oParent = document.getElementById(parent);
    var oBoxs = getByClass(oParent, box);
    //计算整个页面显示的列数
    var oBoxw = oBoxs[0].offsetWidth;// 一个块框的宽
    var num = Math.floor(document.documentElement.clientWidth / oBoxw)
    //设置main的宽
    oParent.style.cssText = 'width:' + oBoxw * num + 'px;ma rgin:0 auto;';
    var hArr = [];//用于存储 每列中的所有块框相加的高度
    for (var i = 0; i < oBoxs.length; i++) {
        if (i < num) {
            hArr.push(oBoxs[i].offsetHeight)
        } else {
            var minH = Math.min.apply(null, hArr);
            var index = getminHIndex(hArr, minH);
            oBoxs[i].style.position = 'absolute';
            oBoxs[i].style.top = minH + 'px';
            oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px';
            hArr[index] += oBoxs[i].offsetHeight;
        }
    }
}

//根据class获取元素
function getByClass(parent, clsName) {
    var boxArr = new Array(), //存储所有class为box的元素
        oElements = parent.getElementsByTagName('*');//获取 父级的所有子集
    for (var i = 0; i < oElements.length; i++) {//遍历子元素、判断类别、压入数组
        if (oElements[i].className == clsName) {
            boxArr.push(oElements[i]);
        }
    }
    return boxArr;
}

function getminHIndex(arr, minH) {
    for (var i in arr) {
        if (arr[i] == minH) {
            return i;
        }
    }
}

//检测是否具备滚动条加载数据块的条件
function checkscrollSide() {
    var oParent = document.getElementById('main');
    var oBoxs = getClassObj(oParent, 'box');
    var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight / 2);  //最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//注意解决兼容性
    var height = document.documentElement.clientHeight || document.body.clientHeight//页面高度
    return (lastPinH < scrollTop + height) ? true : false;
}

jQuery瀑布流布局

js

$(window).on("load", function () {
    waterfall();
    var dataInt = {'data': [{'src': '1.jpg'}, {'src': '2.jpg'}, {'src': '3.jpg'}, {'src': '4.jpg'}]};
    $(window).on('scroll', function () {
        if (checkscrollside()) {
            $.each(dataInt.data, function (key, value) {
                var oBox = $('
').addClass('box').appendTo($('#main'));
                var oPic = $('
').addClass('pic').appendTo($(oBox));
                var oImg = $('').attr('src', 'images/' + $(value).attr('src')).appendTo($(oPic))
            })
            waterfall();
        }
    })
})

function waterfall() {
    var $boxs = $('#main>div');
    var w = $boxs.eq(0).outerWidth();
    var cols = Math.floor($(window).width() / w);
    $('#main').width(w * cols).css('magin', '0 auto')
    var hArr = [];
    $boxs.each(function (index, value) {
        var h = $boxs.eq(index).outerHeight();
        if (index < cols) {
            hArr[index] = h;
        } else {
            var minH = Math.min.apply(null, hArr);
            var minHIndex = $.inArray(minH, hArr);
            $(value).css({
                'position': 'absolute',
                'top': minH + 'px',
                'left': $boxs.eq(minHIndex).position().left
            })
            hArr[minHIndex] += $boxs.eq(index).outerHeight();
        }
    })
}

function checkscrollside() {
    var $lastBox = $('#main>div').last();
    var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2);
    var scrollTop = $(window).scrollTop();
    var documentH = $(window).height();
    return (lastBoxDis < scrollTop + documentH) ? true : false;
}

效果图