Jquery实现瀑布流布局,自适应屏幕宽

2024-04-28 12:11•JavaScript•阅读 1871
<?php
/*
    @author:luowen
    @time:2013-08-12
    @desc:jquery实现瀑布流布局,自适应屏幕宽

[HTML Code]
    <!doctype html>
    <html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <link rel="stylesheet" type="text/css" href="wf.css">
        <script type="text/javascript" src="../Jquery.js"></script>
        <script type="text/javascript" src='wf.js'></script>

    </head>
    <body >
        <div class="container">
            <div class="wrap">
                
                <div class="box">
                    <img src="1.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="2.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="3.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="4.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="5.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="6.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="7.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="8.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="9.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="10.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="5.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="9.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="10.jpg" />
                    <a href="">gril1</a>
                </div>
                <div class="box">
                    <img src="5.jpg" />
                    <a href="">gril1</a>
                </div>

                

            </div>
        </div>
        
    </body>
    </html>

[CSS Code]
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        margin: 0 auto;

        
    }
    .wrap{
        margin: 0 auto;
        position: relative;
    }
    .box{
        width: 238px;
        margin-left: 10px;
        padding:5px;
        border:1px solid #ccc;
        border-radius: 10px;
        box-shadow: 1px 1px 10px #000,-1px -1px 3px #ccc;
        position: absolute;
        left: 0;
        top: 0;
    }
    .box img{
        width: 234px;
        display: block;
        border-radius: 3px;
    }
    .box a{
        height: 30px;
        text-align: center;
        font:normal 15px '微软雅黑';
        line-height: 20px;
        display: block;


    }
[JS Code]
    $(function(){
            //动态穿件一个数据存放数据
            var arr = [];
            //两边留空白宽度
            var space = 100;
            //盒子的宽度
            var boxW = $('.box').eq(0).outerWidth(true);        
            //文档宽度
            var docW;
            //文档高度
            var docH;
        function PBL(){
            //盒子的个数
            var boxCnt = $('.box').length;
            //文档宽度
            docW = $(document).width();
            //文档高度
            docH = $(document).height();
            //每排显示多少个
            var viewCnt = Math.floor((docW-space*2)/boxW);
            for(var i = 0; i < viewCnt; i++){
                arr[i] = 0;
            }
            //wrap 宽度
            $('.container').width(boxW*viewCnt);

            for(var i = 0; i < boxCnt; i++){
                //判断当前盒子在那个列
                cols = i%viewCnt;
                //讲盒子放在那一列
                switch(cols){
                    case 0:
                        $('.box').eq(i).css({'left':0,'top':arr[0]});
                        arr[0] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 1:
                        $('.box').eq(i).css({'left':boxW,'top':arr[1]});
                        arr[1] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 2:
                        $('.box').eq(i).css({'left':2*boxW,'top':arr[2]});
                        arr[2] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 3:
                        $('.box').eq(i).css({'left':3*boxW,'top':arr[3]});
                        arr[3] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 4:
                        $('.box').eq(i).css({'left':4*boxW,'top':arr[4]});
                        arr[4] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 5:
                        $('.box').eq(i).css({'left':5*boxW,'top':arr[5]});
                        arr[5] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 6:
                        $('.box').eq(i).css({'left':6*boxW,'top':arr[6]});
                        arr[6] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 7:
                        $('.box').eq(i).css({'left':7*boxW,'top':arr[7]});
                        arr[7] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 8:
                        $('.box').eq(i).css({'left':8*boxW,'top':arr[8]});
                        arr[8] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 9:
                        $('.box').eq(i).css({'left':9*boxW,'top':arr[9]});
                        arr[9] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 10:
                        $('.box').eq(i).css({'left':10*boxW,'top':arr[10]});
                        arr[10] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 11:
                        $('.box').eq(i).css({'left':11*boxW,'top':arr[11]});
                        arr[11] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 12:
                        $('.box').eq(i).css({'left':12*boxW,'top':arr[12]});
                        arr[12] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 13:
                        $('.box').eq(i).css({'left':13*boxW,'top':arr[13]});
                        arr[13] += $('.box').eq(i).outerHeight() + 10;
                        break;
                    case 14:
                        $('.box').eq(i).css({'left':14*boxW,'top':arr[14]});
                        arr[14] += $('.box').eq(i).outerHeight() + 10;
                        break;
                }
            }

        }
        PBL();
        $(window).resize(function(){
            PBL();
        });
        $(window).scroll(function(){
            //滚动的高度
            var scrollH = $(window).scrollTop();
            //三列中最小的
            if(scrollH/docH >= 0.8){
                
                $('.wrap').append("<div class='box'><img src='1.jpg'><a href=''>luowen</a></div>");
                // console.log('xx')
            }

        });
    });

注:小BUG 1.屏幕显示最多显示14列,多了出现问题 switch(cols) case 部分
         2.滚动条自动append还没做好..
上一篇 »html5 Canvas 如何自适应屏幕大小？
下一篇 »初学HTML5的一点理解
Jquery实现瀑布流布局,自适应屏幕宽

相关推荐

Html5移动端布局及，rem布局页面自适应布局详解

css实现自适应屏幕高度

jquery/原生js/css3 实现瀑布流以及下拉底部加载

css布局-内容自适应屏幕

css实现九宫格图片自适应布局

关于HTML元素位置屏幕文档宽度计算

CSS左侧固定宽 右侧自适应，兼容所有浏览器

瀑布流的三种实现方式，原生js+jquery+css3

CSS左侧固定宽右侧自适应，兼容所有浏览器
