【js】js实现瀑布流 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        html, body {
            background: #000;
        }

        .wrap-wrap {
            position: absolute;
            top: 100px;
            left: 600px;
            width: 700px;
            height: 500px;
            background-color: wheat;
        }

        #wrap {
            position: absolute;
            top: 20px;
            left: 30px;
            width: 500px;
            height: 100px;
            background: #fff;
            margin: 0 auto;
        }
        #wrap div {
            position: absolute;
        }
    </style>
</head>
<body>
    
<div class="wrap-wrap">
    <div id="wrap"></div>
</div>


<script src="./jquery3.6.0.js"></script>
<script>

function pubu ($wrap, $items, margin_left, margin_top) {

    margin_left = margin_left || 0
    margin_top = margin_top || 0
    var parent_width = $wrap.width()
    var child_width = $items.eq(0).outerWidth()

    // 可以放几列
    var max_column = Math.floor(parent_width / (child_width + margin_left))

    // 每一列的left值
    var column_pos = []
    for (var i = 0; i < max_column; i++) {

        var cur_left = (child_width + margin_left) * i
        column_pos.push(cur_left)
    }

    // 遍历设置位置, 插入DOM
    $items.each(function (index, item) {
        
        var $item = $(item)
        var $childrens = $wrap.children()
        
        // 第一列的位置顺序插入即可
        if ($childrens.length < max_column) {

            $item.css({
                left: column_pos[index],
                top: 0
            })

            $wrap.append($item)
            return
        }


        // --- 第二列开始要判断高度

        // 取出所有列最后一项的高度
        var column_heights = []
        $childrens.each(function (child_index, child_item) {

            var $child_item = $(child_item)
            var pos = $child_item.position()
            var left = pos.left
            var top = pos.top

            // 判断是这是哪一列
            var column_num = 0
            for (var i = 0, len = column_pos.length; i < len; i++) {

                if (left == column_pos[i]) {
                    
                    column_num = i
                    break
                }
            }

            var pre_height = column_heights[column_num] || 0
            var cur_height = top + $child_item.outerHeight()
            
            column_heights[column_num] = Math.max(pre_height, cur_height)
        })


        // 取出目标位置的left和top, top是column_heights里最小的那一项
        var target_top = column_heights[0]
        var target_left = column_pos[0]
        for (var i = 1, len = column_heights.length; i < len; i++) {

            var cur_h = column_heights[i]
            if (cur_h < target_top) {

                target_top = cur_h
                target_left = column_pos[i]
            }
        }

        // 设置位置
        $item.css({
            top: (target_top + margin_top) + 'px',
            left: target_left + 'px'
        })

        // 追加
        $wrap.append($item)
    })
}


</script>
<script>

    var colors = [
        '#374151',
        '#B91C1C',
        '#B45309',
        '#047857',
        '#1D4ED8',
        '#4338CA',
        '#6D28D9',
        '#BE185D',
    ]

    function randomNum(minNum,maxNum){ 
    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minNum+1,10); 
        break; 
        case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
        break; 
            default: 
                return 0; 
            break; 
    } 
} 


    var $items = $()
    for (var i = 1; i <= 20; i++) {

        var $div = $(`<div>${i}</div>`)
        var height = randomNum(50, 200) + 'px'
        $div.css({
            width: '68px',
            height: height,
            background: colors[randomNum(0, 7)],
            color: '#fff',
            textAlign: 'center',
            lineHeight: height,
            border: '1px solid #000'
        })

        $items = $items.add($div)
    }



    pubu($('#wrap'), $items, 10, 10)



</script>
</body>
</html>

 

posted @ 2021-09-08 17:25  蜜蜂老牛黄瓜  阅读(57)  评论(0)    收藏  举报