前端开发简单的瀑布流布局

前端开发南京招聘
常州前端开发招聘
招聘前端开发人员信息编写

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <meta
            name=”viewport”
            content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″
        />
        <style>
            div.item {
                position: absolute;
                width: 200px;
                margin: 10px;
                transition: all 1s;
            }
            div#content {
                position: relative;
            }
            .part1 {
                background-color: yellow;
                height: 200px;
            }
            .part2 {
                background-color: lightblue;
                height: 400px;
            }
            .part3 {
                background-color: pink;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div id=”content”>
            <div class=”item part1″>1</div>
            <div class=”item part2″>2</div>
            <div class=”item part3″>3</div>
            <div class=”item part1″>4</div>
            <div class=”item part1″>5</div>
            <div class=”item part2″>6</div>
            <div class=”item part2″>7</div>
            <div class=”item part3″>8</div>
            <div class=”item part1″>9</div>
            <div class=”item part2″>10</div>
            <div class=”item part2″>11</div>
            <div class=”item part2″>12</div>
            <div class=”item part3″>13</div>
            <div class=”item part3″>14</div>
        </div>
        <script src=”http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js”></script>
        <script>
            function waterFall() {
                var widthNum = parseInt(
                        $(window).width() / $(‘.item’).outerWidth(true),
                    ),
                    allHeight = []
                for (var i = 0; i < widthNum; i++) {
                    allHeight.push(0)
                }
                console.log(allHeight)
                $(‘.item’).each(function() {
                    var $cur = $(this),
                        indx = 0,
                        minAllHeight = allHeight[0]
                    for (var j = 0; j < allHeight.length; j++) {
                        if (allHeight[j] < minAllHeight) {
                            minAllHeight = allHeight[j]
                            indx = j
                        }
                    }
                    $cur.css({
                        left: indx * $cur.outerWidth(true),
                        top: minAllHeight,
                    })
                    allHeight[indx] = minAllHeight + $cur.outerHeight(true)
                })
            }
            waterFall()
            $(window).on(‘resize’, function() {
                waterFall()
            })
        </script>
    </body>
</html>
泰顺web前端开发招聘
前端开发招聘任职要求
合肥 前端开发 招聘
» 本文来自:前端开发者 » 《前端开发简单的瀑布流布局》
» 本文链接地址:https://www.rokub.com/7808.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!