cascade-flow
/
index.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流插件</title>
    <style>
        /* 此样式为 测试样式  S */
        * {
            margin: 0;
            padding: 0;
            outline: none;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }


        .cascade-flow-wrapper,
        .cascade-flow-wrapper * {
            margin: 0;
            padding: 0;
        }

        .cascade-flow-wrapper {
            width: max-content;
            margin: 0 auto;
        }

        .cascade-flow-wrapper .cascade-flow-item {
            background-color: #2d8cf0;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(1) {
            height: 83px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(2) {
            height: 275px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(3) {
            height: 292px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(4) {
            height: 246px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(5) {
            height: 266px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(6) {
            height: 220px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(7) {
            height: 240px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(8) {
            height: 167px;
        }

        .cascade-flow-wrapper .cascade-flow-item:nth-of-type(9) {
            height: 100px;
        }

        .button-group {
            width: 960px;
            margin: 30px auto;
            color: #6b6b6b;
        }

        .input-item {
            display: inline-block;
            width: 470px;
        }

        .input-item input {
            display: inline-block;
            width: 100%;
            height: 32px;
        }
        .button-group button{
            margin-top: 25px;
            display: inline-block;
            padding: 5px 15px;
            color: #fff;
            border-style: solid;
            border-width: 1.5px;
            border-color: transparent;
            cursor: pointer;
            transition: all .3s;
        }
        .button-group button#preview{
            background-color: #2d8cf0;
        }
        .button-group button#reset{
            background-color: #e41749;
        }
        .button-group button#preview:hover{
            background-color: #fff;
            border-color: #2d8cf0;
            color: #2d8cf0;
        }
        .button-group button#reset:hover{
            background-color: #fff;
            border-color: #e41749;
            color: #e41749;
        }
        /* 此样式为 测试样式  S */
    </style>
</head>

<body>
    <div class="button-group">
        <label class="input-item">
            每列宽度:
            <input id="width" type="number" placeholder="每列宽度" value="200">
        </label>
        <label class="input-item">
            列数:
            <input id="col" type="number" placeholder="列数" value="3">
        </label>
        <button id="preview" type="button">Preview</button>
        <button id="reset" type="reset">Reset</button>
    </div>
    <div id="cascade-flow-wrapper" class="cascade-flow-wrapper">
        <div class="cascade-flow-item">1</div>
        <div class="cascade-flow-item">2</div>
        <div class="cascade-flow-item">3</div>
        <div class="cascade-flow-item">4</div>
        <div class="cascade-flow-item">5</div>
        <div class="cascade-flow-item">6</div>
        <div class="cascade-flow-item">7</div>
        <div class="cascade-flow-item">8</div>
        <div class="cascade-flow-item">9</div>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/cascade-flow.js"></script>
    <script>

        $(function () {
            $('#cascade-flow-wrapper').cascadeFlow({ width: 200, col: 3 });
            $('#preview').click(function () {
                var width = $('#width');
                var col = $('#col');
                if (width.val() < 1) {
                    width.val(220);
                }
                if (col.val() < 1) {
                    col.val(3);
                }
                var options = {
                    width: width.val(),
                    col: col.val()
                }
                $('#cascade-flow-wrapper').cascadeFlow(options);
            })
            $('#reset').click(function () {
                var options = {
                    width: 200,
                    col: 3
                }
                $('#cascade-flow-wrapper').cascadeFlow(options);
            })
        })

        // 注释部分代码为编写过程部分 自测代码
        /*;(function randomNumber(min,max) {
            // max - 期望的最大值
            // min - 期望的最小值
            let a = parseInt(Math.random() * (max - min + 1) + min, 10);
            let b = Math.floor(Math.random() * (max - min + 1) + min);
            console.log(a);
            console.log(b)
        })(50,500);*/


        // ;(function getRowFirstNum(col, row){
        //     console.log("------------------")
        //     console.log(col * row - (col -1))
        //     console.log("------------------")
        //     return col * row - (col -1)
        // })(3,2);

        // var rows = (30 % 3 == 0) ? (30 / 3) : Math.ceil((30 / 3));
        // console.log(rows)
        /**
         *
         * CreateBy zhuzhaofneg
         * DateTime 2019年05月26日10:25:17
         * 随机生成 min - max 之间的数
         */
        /*  function randomNumber(min, max) {
             return Math.floor(Math.random() * (max - min + 1) + min);
         } */
        function initialization() {
            // var cascadeFlowItems = document.querySelectorAll('div.cascade-flow-wrapper .cascade-flow-item');
            // cascadeFlowItems.forEach((item, index) => {
            //     let tempHeight = randomNumber(50, 400);
            //     item.style.height = tempHeight + 'px';
            //     item.textContent = index + 1;
            // })
            // $('#cascade-flow-wrapper').cascadeFlow({ width: 220, col: 5 });
        }
        // window.onload = initialization;
    </script>
</body>

</html>