瀑布流布局

//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" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_01.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_02.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_03.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_04.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_05.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_06.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_07.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_08.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_09.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_010.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_011.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_012.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_013.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_014.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_015.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_016.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_017.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_018.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_019.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/toTop.gif" alt=""></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;
}

 

posted @ 2016-12-04 11:44  malu15  阅读(120)  评论(0编辑  收藏  举报