jquery实现瀑布流布局

html:

<!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" /></div>

    <div><img src="imgs/2.jpg" /></div>

    <div><img src="imgs/3.jpg" /></div>

    <div><img src="imgs/4.jpg" /></div>

    <div><img src="imgs/5.jpg" /></div>

    <div><img src="imgs/6.jpg" /></div>

    <div><img src="imgs/7.jpg" /></div>

    <div><img src="imgs/8.jpg" /></div>

    <div><img src="imgs/9.jpg" /></div>

    <div><img src="imgs/10.jpg" /></div>

    <div><img src="imgs/11.jpg" /></div>

    <div><img src="imgs/12.jpg" /></div>

    <div><img src="imgs/13.jpg" /></div>

    <div><img src="imgs/14.jpg" /></div>

    <div><img src="imgs/15.jpg" /></div>

    <div><img src="imgs/16.jpg" /></div>

    <div><img src="imgs/17.jpg" /></div>

    <div><img src="imgs/18.jpg" /></div>

    <div><img src="imgs/19.jpg" /></div>

    <div><img src="imgs/20.jpg" /></div>

    <div><img src="imgs/21.jpg" /></div>

    <div><img src="imgs/22.jpg" /></div>

    <div><img src="imgs/23.jpg" /></div>

    <div><img src="imgs/24.jpg" /></div>

    <div><img src="imgs/25.jpg" /></div>

    <div><img src="imgs/26.jpg" /></div>

    <div><img src="imgs/27.jpg" /></div>

    <div><img src="imgs/28.jpg" /></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;

}



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。