瀑布流

瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格，像花瓣网、蘑菇街、美丽说

实现原理

• 根据浏览器窗口的宽度和每列的- 固定宽度计算出列数。
• 循环生成每一项元素对象，并将- 其添加至父级元素中。
• 创建一个用于储存每列最新高度的数组，并创建用于获取最短列下标函数。
• 循环设置每一项元素的位置，将当前项的位置设置在最短一列的下方。
• 当滚动条接近底部时，加载新数据。

代码实现

html部分

body>
    <div class="wrap">

        <div class="item">
            <div class="item-wrap">

                <div class="item-img">
                    <div class="mask"></div>
                    <div class="img"><img src="img/2.jpeg" alt=""></div>
                </div>
                <div class="text"></div>
            </div>
        </div>
        <div id="ftop">top</div>
    </div>
</body>

<style type="text/css">
        .wrap {
            
            border: 1px solid #000000;
            margin: 0 auto;
            position: relative;


        }

        .item-wrap {
            display: inline-block;
            padding: 10px;
        }
        .item {
            width: 300px;
            border: 2px solid black;
            display: inline-block;
            vertical-align: top;
            position: absolute;
        }
        .item-img img {
            width: 100%;
        }
        .item-img {
            position: relative;
        }
        .mask {
            width: 100%;
            height: 100%;
            background-color: rgba(31, 31, 31, 0.6);
            display: none;
            position: absolute;
            top: 0;
            left: 0;
        }

        .item-img:hover .mask {
            display: block;
        }
        #ftop{
            width: 80px;
            height: 80px;
            background-color: brown;
            text-align: center;
            position: fixed;
            right:10px;
            bottom: 30px;
            line-height: 80px;
            font-weight: 800;
        }
    </style>

//json数据（数组）
var json_obj = {
        data: [{
            img_src: 'img/2.jpeg',
            text: '10f23555f66'
        }, {
            img_src: 'img/3.jpeg',
            text: '104d2355566'
        }, {
            img_src: 'img/4.jpeg',
            text: '10235g5566'
        }, {
            img_src: 'img/5.jpeg',
            text: '10235h5566'
        }, {
            img_src: 'img/9.jpeg',
            text: '1023j55566'
        }, {
            img_src: 'img/6.jpeg',
            text: '1023j5f5566'
        }, {
            img_src: 'img/7.jpeg',
            text: '1023j55566'
        }, {
            img_src: 'img/8.jpeg',
            text: '1023j55566'
        }, {
        img_src: 'img/9.jpeg',
        text: '1023j55566'
        }, {
        img_src: 'img/10.jpeg',
        text: '1023j55566'
        }, {
        img_src: 'img/11.jpeg',
        text: '1023j55566'
        }, {
        img_src: 'img/12.jpeg',
        text: '1023j55566'
        }, {
        img_src: 'img/13.jpeg',
        text: '1023j55566'
        }]
    }
    
       var wrap = document.getElementsByClassName('wrap')[0];
    window.onresize = function () {
        wrap.style.width = document.documentElement.clientWidth;
        posi();
        // location.reload();//刷新页面
    }

    function creatItem() {
        var html = ""
        for (var i = 0; i < json_obj.data.length; i++) {
            html +=
                '<div class="item"><div class="item-wrap"><div class="item-img"><div class="mask"></div><div class="img"><img src="' +
                json_obj.data[i].img_src + '"alt=""></div></div><div class="text">' + json_obj.data[i].text +
                '</div></div></div>'
        }
        wrap.innerHTML += html;
    }
    creatItem();

    window.onload = function () {
        posi()
    }

    function posi() {
        var item_all = document.getElementsByClassName('item');
        var col = parseInt(wrap.clientWidth / item_all[0].offsetWidth);
        var colHeight_arr = [];
        for (var i = 0; i < item_all.length; i++) {
            //判断第一行
            if (i < col) {
                colHeight_arr.push(item_all[i].offsetHeight)
                item_all[i].style.left = i * item_all[0].offsetWidth + 'px';
                item_all[i].style.top = "0px";
            } else {
                //找高度最小列
                var col_minIndex = getMinIndex(colHeight_arr)

                item_all[i].style.left = col_minIndex * item_all[0].offsetWidth + 'px';
                item_all[i].style.top = colHeight_arr[col_minIndex] + 'px';
                //跟新列高度
                colHeight_arr[col_minIndex] = colHeight_arr[col_minIndex] + item_all[i].offsetHeight
            }

        }
    }

    function getMinIndex(arr) {
        var min = arr[0]
        var index = 0
        for (var i = 1; i < arr.length; i++) {
            if (min > arr[i]) {

                min = arr[i] //赋值同时，拿到索引
                index = i
            }
        }
        return index
    }
    window.onscroll = function () {
        allheight_ = document.body.scrollHeight;
        viewheight = document.body.clientHeight;
        scoheight = document.body.scrollTop;
        daheight = viewheight + scoheight;
        // if(daheight==allheight_){
        //     alert(12112);
        // }
        if (allheight_ > daheight) {} else {
            creatItem();
            posi()
        }
    }
    // window.onresize=posi

    var obtn = document.getElementById('ftop');
    obtn.onclick = function () {

        var timer = null;
        var isTop = true;
        //获取页面的可视窗口高度
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

        // //滚动条滚动时触发
       window.onscroll = function(){
             var osTop = document.documentElement.scrollTop || document.body.scrollTop;
           if (osTop >= clientHeight) {
               obtn.style.display = 'block';
          }else{
                obtn.style.display = 'none';
            }

            if (!isTop) {
               clearInterval(timer);
             }
          isTop = false;
        };

        //设置定时器
        timer = setInterval(function () {
            //获取滚动条距离顶部的高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;

            //减小的速度
            var isSpeed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
            console.log(osTop + isSpeed);

            isTop = true;

            //判断，然后清除定时器
            if (osTop == 0) {
                clearInterval(timer);
            }
        }, 30);
    };
</script>