瀑布流

时间：2019-04-25 17:36:48 阅读：168 评论：0 收藏：0 [点我收藏+]

标签：head index document return class 瀑布流 charset selector add

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>瀑布流</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: RGB(232, 231, 226);
        }

        .wrap {
            margin: 0 auto;
            width: 1000px;
        }

        .column {
            float: left;
            width: 225px;
        }

        .content {
            margin: 5px;
            background-color: white;
        }

        img {
            display: block;
            margin: 1%;
            width: 98%;
        }

        .btn {
            display: block;
            position: fixed;
            top: 0;
            right: 50px;
            width: 120px;
            height: 30px;
        }
    </style>

</head>

<body>
    <div id="wrap" class="wrap">
        <div class="column" id="one"></div>
        <div class="column" id="two"></div>
        <div class="column" id="three"></div>
        <div class="column" id="four"></div>
    </div>
    <button class="btn" id="add">add</button>
    <script>
        var imgSrc = ‘https://www.cnblogs.com/images/cnblogs_com/justSmile2/1329116/t_angry.png‘;
        var textArray = [
            ‘h <br /> ello kitty‘,
            ‘h <br /> ello k <br /> itty‘,
            ‘h <br /> ello k <br /> i <br /> tty‘,
            ‘h <br /> ello k <br /> i <br /> t <br /> ty‘
        ];
        var columns = $All(‘.column‘);
        for (var i = 0, j = columns.length; i < j; i++) {
            fill(columns[i], unit());
        }



        $(‘#add‘).onclick = function () {
            fill(getMinColumns(), unit());
        }

        // get what min
        function getMinColumns() {
            var arr = [];
            for (var i = 0, j = columns.length; i < j; i++) {
                arr.push(columns[i].offsetHeight);
            }
            var min = Math.min.apply(null, arr);
            return columns[arr.indexOf(min)];
        }

        // get str will be added
        function unit() {
            var str = ‘‘;
            var ran = textArray[Math.round(Math.random() * (textArray.length - 1))];
            str += ‘<div class="content">‘ +
                ‘<img src=‘ + imgSrc + ‘ />‘ +
                ‘<div>‘ + ran +
                ‘</div></div>‘
            return str;
        }

        function $(s) {
            return document.querySelector(s);
        }

        function $All(s) {
            return document.querySelectorAll(s);
        }

        function fill(obj, str) {
            obj.innerHTML += str;
        }
    </script>

</body>

</html>

瀑布流

标签：head index document return class 瀑布流 charset selector add

原文地址：https://www.cnblogs.com/justSmile2/p/10769638.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)

周排行