zoukankan      html  css  js  c++  java
  • jQuery实现瀑布流的简单方法

    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;
         250px;
    }
    
    .box img{ 250px;}
  • 相关阅读:
    Spring Boot四:配置文件详解properties
    程序员常去的14个顶级开发社区
    Spring Boot二:创建第一个web工程 hello world
    Java架构工程师知识图
    Java高效开发12个精品库
    华为员工:表面光鲜 工作十年买不起房
    如果你是一个程序员,又要踏足人工智能领域,应该要知道哪些语言
    H5表单提交上传图片
    转:正则表达式
    转载:jsp九大内置对象和四大作用域
  • 原文地址:https://www.cnblogs.com/littlefly/p/3830261.html
Copyright © 2011-2022 走看看