jQuery实现瀑布流的简单方法

时间：2014-07-09 00:07:52 阅读：201 评论：0 收藏：0 [点我收藏+]

HTML代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>waterFall</title>
    <link rel="stylesheet" href="wf.css">
    <script src="jquery.js"></script>
    <script src="wf.js"></script>
</head>
<body>
    
    <div class="wrap">
        <div class="box">
            <img src="1.jpg" alt="">
            <p>11111111111</p>
        </div>
        <div class="box">
            <img src="2.jpg" alt="">
            <p>22222222222</p>
        </div>
        <div class="box">
            <img src="3.jpg" alt="">
            <p>33333333333</p>
        </div>
        <div class="box">
            <img src="4.jpg" alt="">
            <p>44444444444</p>
        </div>
        <div class="box">
            <img src="5.jpg" alt="">
            <p>555555555555</p>
        </div>
        <div class="box">
            <img src="6.jpg" alt="">
            <p>666666666666</p>
        </div>
        <div class="box">
            <img src="7.jpg" alt="">
            <p>777777777777</p>
        </div>
        <div class="box">
            <img src="8.jpg" alt="">
            <p>8888888888888</p>
        </div>
        <div class="box">
            <img src="9.jpg" alt="">
            <p>99999999999</p>
        </div>
    </div>

</body>
</html>

js代码

$(function(){
    $(‘img‘).load(function(){
        var box = $(‘.box‘);
        var boxHeight = {
            leftBox:[],
            centerBox:[],
            rightBox:[]
        }

        for(var i = 0;i < box.length;i++){
        var now = i%3;    //now的值为0,1,2

            switch(now){
                case 0:
                    box.eq(i).css(‘left‘,‘10px‘);
                    boxHeight.leftBox.push(box.eq(i).height());
                    var now2 = Math.floor(i/3);

                    if(now2==0){
                        box.eq(i).css(‘top‘,‘0‘);
                    }else{
                        var total = 0;
                        for(var j=0;j<now2;j++){
                            total += boxHeight.leftBox[j]+10;
                        }
                        box.eq(i).css(‘top‘,total+‘px‘);
                    }

                break;

                case 1:
                    box.eq(i).css(‘left‘,‘270px‘);
                    boxHeight.centerBox.push(box.eq(i).height());
                    var now2 = Math.floor(i/3);

                    if(now2==0){
                        box.eq(i).css(‘top‘,‘0‘);
                    }else{
                        var total = 0;
                        for(var j=0;j<now2;j++){
                            total += boxHeight.centerBox[j]+10;
                        }
                        box.eq(i).css(‘top‘,total+‘px‘);
                    }
                break;

                case 2:
                    box.eq(i).css(‘left‘,‘530px‘);
                    boxHeight.rightBox.push(box.eq(i).height());
                    var now2 = Math.floor(i/3);

                    if(now2==0){
                        box.eq(i).css(‘top‘,‘0‘);
                    }else{
                        var total = 0;
                        for(var j=0;j<now2;j++){
                            total += boxHeight.rightBox[j]+10;
                        }
                        box.eq(i).css(‘top‘,total+‘px‘);
                    }
                break;
            }
        }
    });
});

CSS代码

*{
    padding: 0;
    margin: 0;
}

.wrap{
    position: relative;
}

.box{
    position: absolute;
    left: 0;
    top:0;
    width: 250px;
}

.box img{width: 250px;}

jQuery实现瀑布流的简单方法,布布扣,bubuko.com

jQuery实现瀑布流的简单方法

标签：style blog color width os cti

原文地址：http://www.cnblogs.com/littlefly/p/3830261.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行