瀑布流布局

Posted 2020-08-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了瀑布流布局相关的知识，希望对你有一定的参考价值。

//html文件



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <link rel="stylesheet" type="text/css" href="STYLE.css">
</head>
<style>

*{
    margin: 0;
    padding:0;
}
#main{
    position: relative;
}
.box{
    float: left;
}
.pic{
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
}
.pic img {
    width: 165px;
    height: auto;
}
</style>

<body> <div id="main"> <div class="box"> <div class="pic"><img src="./images/P_00.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_01.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_02.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_03.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_04.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_05.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_06.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_07.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_08.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_09.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_010.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_011.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_012.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_013.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_014.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_015.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_016.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_017.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_018.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/P_019.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="./images/toTop.gif" ></div> </div> </div> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="script.js" type="text/javascript"></script> </body> </html>

//JQuery文件



$(window).on(‘load‘,function(){
    waterfull();
    //实现加载
    var dateInt={"data":[{"src":‘P_00.jpg‘},{"src":‘P_01.jpg‘},{"src":‘P_02.jpg‘},{"src":‘P_03.jpg‘}]};
    $(window).on(‘scroll‘,function(){
        if(checkScrollSlide){
            $.each(dateInt.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));
            })
        }
        waterfull();
    })

});
function  waterfull(){
    var $boxs = $(‘#main>div‘);
    var w = $boxs.eq(0).outerWidth();
    var cols = Math.floor($(window).width()/w);
    $(‘main‘).width(w*cols).css(‘margin‘,‘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‘:minHindex*w+‘px‘
            })
            hArr[minHindex] += $boxs.eq(index).outerHeight();
        }
    })
}
function checkScrollSlide(){
    var $lastbox = $(‘#main>div‘).last();
    var lastBoxDis = $lastbox.offset().top+Math.floor($lastbox.ouertHeight()/2);
    var scrollTop = $(window).scrollTop();
    var documentH = $(window).height();
    return (lastBoxDis<scrollTop+documentH)?true:false;
}

以上是关于瀑布流布局的主要内容，如果未能解决你的问题，请参考以下文章

用css3的 clomus 布局怎么写瀑布流