瀑布流布局和滚动加载更多

心已赠人 2022-09-16 05:48 287阅读 0赞

...html
    
        <div id="box">
            <div class="item"><img src="./images/1.jpg"></div>
            <div class="item"><img src="./images/2.jpg"></div>
            <div class="item"><img src="./images/3.jpg"></div>
            <div class="item"><img src="./images/4.jpg"></div>
            <div class="item"><img src="./images/5.jpg"></div>
            ...
        </div>
    
    ...
    
    ...js
    //瀑布流布局
    var box = document.getElementById('box')
    var items = box.children;
    var gap = 10
    
    window.onload = function(){
        waterFall();
    }
            function waterFall(){
            var pageWidth = getClient().width;
            var itemWidth = items[0].offsetWidth;
            var columns = pageWidth / itemWidth;
        
            var arr = []; //存放一行地高度
            for(var i=0; i< items.length;i++){
                if(i<columns){  //第一行
                    items[i].style.top = 0;
                    items[i].style.left= (itemWidth + gap)*i + 'px';
                    arr.push(items[i].offsetHeight)
                }else{
                    var minHeight = arr[0];
                    var index = 0   //最小高度的索引
                    for(var j=0; j< arr.length;j++){
                        if(minHeight > arr[j] ){
                            minHeight = arr[j];
                            index = j;
                        }
                    }
                    items[i].style.top = arr[index] + gap + 'px';
                    items[i].style.left = items[index].offsetLeft;
                    arr[index] = arr[index] + items[i].offsetHeight + gap;
                }
            }
        }
    function getClient(){
        return {
            width:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
    }
    
    //滚动加载更多
    
    window.onscroll = function(){
    //假设datas是从后端获取到的数据
    var datas = [
        "./img/1.jpg",
        "./img/2.jpg",
        "./img/3.jpg",
        "./img/4.jpg",
        "./img/5.jpg",
        "./img/6.jpg",
    ]
        if(getClient().height + getScrollTop >= items[items.length-1].offsetTop ){
            for(var i=0;i<datas.length;i++){
                var div = document.createElement('div')
                div.className = 'items';
                div.innerHTML = '<img src="'+datas[i]+'">'
                box.appendChild(div)
            }
            waterFall()
        }
    }
    function getScrollTop(){
        return window.pageYOffset || document.documentElement.scrollTop;
    }
    ...