首页 > 代码库 > jQuery实现瀑布流的简单方法

jQuery实现瀑布流的简单方法

2024-07-11 00:49:07   224人阅读

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;}

 


联系
我们