瀑布流布局

最新推荐文章于 2024-08-01 15:19:04 发布

小学林

最新推荐文章于 2024-08-01 15:19:04 发布

阅读量152

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_36026822/article/details/80386449

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

js瀑布流布局

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/fall.js"></script>
</head>
<style type="text/css">
    *{padding: 0;margin:0;}
    #main{
        position: relative;
    }
    .box{
        padding: 15px 0 0 15px;
        float:left;
    }
    .pic{
        padding: 10px;
        border:1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }
    .pic img{
        width:162px;
        height:auto;
    }
</style>
<body>
<div id="main">
    <div class="box">
        <div class="pic">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/2.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/3.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/4.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/5.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/6.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/7.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/8.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/9.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/10.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/11.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/12.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/13.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/14.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/15.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/16.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/17.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/18.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/19.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/20.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/21.jpg"/>
        </div>
    </div>
</div>
</body>
</html>

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瀑布流布局

$(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 = $('<div>').addClass('box').appendTo($('#main'));
                var oPic = $('<div>').addClass('pic').appendTo($(oBox));
                var oImg = $('<img>').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;
}

效果图