原生js 瀑布流

最新推荐文章于 2024-09-29 11:25:09 发布

周粥粥123

最新推荐文章于 2024-09-29 11:25:09 发布

阅读量55

点赞数

文章标签： javascript css html5

本文链接：https://blog.csdn.net/m0_59044521/article/details/120514333

版权

该博客探讨了如何使用CSS Flexbox布局在网页上动态生成元素，并根据元素的高度进行排序。JavaScript代码用于响应窗口尺寸变化，调整列数，并在滚动到页面底部时生成新的内容。此外，还介绍了如何随机设置元素的高度和背景色，为页面添加动态效果。

摘要由CSDN通过智能技术生成

css

  <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            display: flex;
            padding: 0 2%;
        }
        
        #box>div {
            flex: 1px;
            border: 1px solid #ccc;
            text-align: center;
        }
        
        .child_box {
            background-color: aqua;
        }
    </style>

html

 <div id="box">

    </div>

<script>
    //页码
    let page = 1
        //dom 生成开关
    let type = true
        // 生成列数
    let list_number = 5
        //获取视图窗口宽度改变列数
    let view_width = document.documentElement.clientWidth
    if (view_width < 930) {
        list_number = 3
    }
    if (view_width < 740) {
        list_number = 2
    }
    let list_str = ''
    for (let i = 0; i < list_number; i++) {
        list_str += `
            <div>
                <div class="child_box">
                    
                </div>
            </div>
            `
    }
    let box = document.querySelector('#box')
    box.innerHTML = list_str
        //验证排序
        // let child_box = document.querySelectorAll('.child_box')
        // let child_box_arr = [...child_box]
        // let new_sort_arr = child_box_arr.sort(function(a,b){
        //     return a.offsetHeight-b.offsetHeight
        // })
        // console.log(new_sort_arr)
        //生成数据
    create_dom()

    function create_dom() {
        if (!type) {
            return
        }
        type = false
        let child_box = document.querySelectorAll('.child_box')
        let child_box_arr = [...child_box]
        let data_num = 20
        for (let i = 0; i < data_num; i++) {
            let div = document.createElement('div')
            div.innerText = `这是第${page}页的第${i+1}个盒子`
            div.style.height = auto_header(100, 300) + 'px'
            div.style.backgroundColor = auto_color()
            let new_sort_arr = child_box_arr.sort(function(a, b) {
                return a.offsetHeight - b.offsetHeight
            })
            new_sort_arr[0].appendChild(div)
        }
        page += 1
        type = true
    }
    //随机生成高度
    function auto_header(state_num = 200, over_num = 400) {
        over_num = over_num - state_num
        return Number.parseInt(Math.random() * state_num + over_num)
    }
    //随机颜色
    function auto_color() {
        return `rgb(${Number.parseInt(Math.random()*255)},${Number.parseInt(Math.random()*255)},${Number.parseInt(Math.random()*255)})`
    }
    //加滚动效果
    document.onscroll = function() {
        let d = document.documentElement.offsetHeight
        let a = document.documentElement.scrollTop
        let b = document.documentElement.clientHeight
        if (d - a - b < 200) {
            create_dom()
        }
    }
</script>