jquery实现瀑布流布局

<!DOCTYPE html>    <html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" href="index.css"/>        <script src="jquery-1.7.1.min.js"></script>        <script src="index.js"></script>    </head>    <body>    <div>        <div><img src="imgs/1.jpg" alt=""/></div>        <div><img src="imgs/2.jpg" alt=""/></div>        <div><img src="imgs/3.jpg" alt=""/></div>        <div><img src="imgs/4.jpg" alt=""/></div>        <div><img src="imgs/5.jpg" alt=""/></div>        <div><img src="imgs/6.jpg" alt=""/></div>        <div><img src="imgs/7.jpg" alt=""/></div>        <div><img src="imgs/8.jpg" alt=""/></div>        <div><img src="imgs/9.jpg" alt=""/></div>        <div><img src="imgs/10.jpg" alt=""/></div>        <div><img src="imgs/11.jpg" alt=""/></div>        <div><img src="imgs/12.jpg" alt=""/></div>        <div><img src="imgs/13.jpg" alt=""/></div>        <div><img src="imgs/14.jpg" alt=""/></div>        <div><img src="imgs/15.jpg" alt=""/></div>        <div><img src="imgs/16.jpg" alt=""/></div>        <div><img src="imgs/17.jpg" alt=""/></div>        <div><img src="imgs/18.jpg" alt=""/></div>        <div><img src="imgs/19.jpg" alt=""/></div>        <div><img src="imgs/20.jpg" alt=""/></div>        <div><img src="imgs/21.jpg" alt=""/></div>        <div><img src="imgs/22.jpg" alt=""/></div>        <div><img src="imgs/23.jpg" alt=""/></div>        <div><img src="imgs/24.jpg" alt=""/></div>        <div><img src="imgs/25.jpg" alt=""/></div>        <div><img src="imgs/26.jpg" alt=""/></div>        <div><img src="imgs/27.jpg" alt=""/></div>        <div><img src="imgs/28.jpg" alt=""/></div>    </div>    </body>    </html>    css：    *{        margin: 0;        padding: 0;    }    .walterfull{        position: relative;    }    .box{        float: left;        padding: 10px;        border: 1px solid #ccc;        margin: 15px 0 0 15px;        box-shadow: 0 0 5px pink;    }    img{        width: 180px;    }    js：    /**     * Created by ll0u on 1/7/2015.     */    $(window).load(function(){        walterFall();        $(window).on('scroll', function(){            if(checkLoad()){                var boxList = $('.walterfull>.box');                $.each(data.imgs, function(index, value){                    var oBox = $('<div>').addClass('box').appendTo($('.walterfull'));                    var oImg = $('<img>').attr('src', value.url).appendTo(oBox);                    minH = Math.min.apply(null, colH);                    minHIndex = $.inArray(minH, colH);                    console.log(minH)                    console.log(boxList.eq(minHIndex).position().left)                    oBox.css({                        position: 'absolute',                        top: minH,                        left: boxList.eq(minHIndex).position().left                    })                    colH[minHIndex] += oBox.outerHeight(true);                })            }else{              }        })    })      var data = {imgs:        [            {url: 'imgs/28.jpg'},            {url: 'imgs/29.jpg'},            {url: 'imgs/30.jpg'},            {url: 'imgs/31.jpg'},            {url: 'imgs/32.jpg'}        ]    }    var colH = []; //存放每一列的高度    var minH = 0; //存放最小高度    function walterFall(){        var oParent = $('.walterfull');        var boxList = $('.walterfull>.box');        var screenW = $(window).width();        var screenH = $(window).height();        var boxW = boxList.eq(0).outerWidth(true);        var columns = Math.floor(screenW/boxW);        var minHIndex = 0; //存放最小高度的列        oParent.css({            width: columns * boxW + parseInt($(boxList[0]).css('marginLeft')),            margin: '0 auto'        })        boxList.each(function(index, dom){            if(index < columns){                colH.push($(dom).outerHeight(true));            }else{                minH = Math.min.apply(null, colH);                minHIndex = $.inArray(minH, colH);                $(dom).css({                    position: 'absolute',                    top: minH,                    left: boxList.eq(minHIndex).position().left                })                colH[minHIndex] += $(dom).outerHeight(true);            }        })    }    function checkLoad(){        var lastBox = $('.walterfull>.box').last();        var disT = lastBox.offset().top + Math.floor(lastBox.outerHeight(true)/2);        var screenT = $(window).height() + $(window).scrollTop();        return disT<screenT ? true : false;    }
热门搜索

jquery实现瀑布流布局
