js实现一个简易的瀑布流效果

瀑布流效果,就是每张大小不同的图片不留白的铺满整个网页,首先要进行页面的设置,设置几个固定的图片,让他们排成一排:





    
    
    
    Document
    



    

完成后,首先要进行判断,因为大小不一的图片排成排的话,中间会有很多留白的空隙,所以要在每行进行判断,取每行中的高度最小的图片,获取之后,在最小的图片之后,将下一行要排列的图片绝对定位在 上一行最小高度的图片之下,然后每次定位之后,在附加一个高度,让图片每次附加完后都会调换位置

var warpper = document.querySelector('.warpper');
        var html_w = document.documentElement.clientWidth || document.body.clientWidth;
        var boxs = document.querySelectorAll('.box');
        //获取图片外包的盒子的总数
        var box_w = boxs[0].offsetWidth;
        //获取单个box的宽度
        var cols = Math.floor(html_w / box_w)
        //获取每行在当前宽度下可装的图片数

        warpper.style.width = box_w * cols + 'px'
        //最大的盒子根据每个小盒子的宽度和数量来进行宽度赋予
        var arr = [];
        for (var i = 0; i < boxs.length; i++) {
            if (i < cols) {
                //当i小于当前该行的个数时
                arr.push(boxs[i].offsetHeight);
                //数组arr将这些数字装进
            } else {
                var minH = Math.min.apply(Math, arr)
                //取数组中高度最小的值
                var ind = arr.indexOf(minH);
                //获取当前最小值对应的下标
                boxs[i].style.cssText = `position:absolute;top:${minH}px;left:${box_w*ind}px`
                //为最小值之后的值设置一个绝对定位,使该元素沿着最小值的高度往下排列
                arr[ind] += boxs[i].offsetHeight
                //每次循环之后,当前的ind加上一个高度的值
            }                                     
        }

最后,传入数据,每次进行传值调用排列即可,完整代码:

window.addEventListener('load', addEvent);

function addEvent() {
    var data = {
        'dataimg': [{
                'src': '22.jpg'
            },
            {
                'src': '23.jpg'
            },
            {
                'src': '24.jpg'
            },
            {
                'src': '25.jpg'
            },
            {
                'src': '26.jpg'
            },
            {
                'src': '27.jpg'
            },
            {
                'src': '28.jpg'
            },
            {
                'src': '29.jpg'
            },
            {
                'src': '30.jpg'
            },
            {
                'src': '31.jpg'
            },
            {
                'src': '32.jpg'
            },
            {
                'src': '33.jpg'
            },
            {
                'src': '34.jpg'
            },
            {
                'src': '35.jpg'
            },
            {
                'src': '36.jpg'
            },
            {
                'src': '37.jpg'
            },
            {
                'src': '38.jpg'
            },
            {
                'src': '39.jpg'
            },
            {
                'src': '40.jpg'
            },
            {
                'src': '41.jpg'
            },
            {
                'src': '42.jpg'
            },
            {
                'src': '43.jpg'
            },
            {
                'src': '44.jpg'
            },
            {
                'src': '45.jpg'
            },
            {
                'src': '46.jpg'
            },
            {
                'src': '47.jpg'
            },
            {
                'src': '48.jpg'
            },
            {
                'src': '49.jpg'
            },
            {
                'src': '50.jpg'
            },
            {
                'src': '51.jpg'
            },
            {
                'src': '52.jpg'
            },
            {
                'src': '53.jpg'
            },
            {
                'src': '54.jpg'
            },
            {
                'src': '55.jpg'
            },
            {
                'src': '56.jpg'
            },
            {
                'src': '57.jpg'
            },
            {
                'src': '58.jpg'
            },
            {
                'src': '59.jpg'
            },
            {
                'src': '60.jpg'
            },
            {
                'src': '61.jpg'
            },
            {
                'src': '62.jpg'
            },
            {
                'src': '63.jpg'
            },
            {
                'src': '64.jpg'
            },
            {
                'src': '65.jpg'
            },
            {
                'src': '66.jpg'
            },
            {
                'src': '67.jpg'
            },
            {
                'src': '68.jpg'
            },
            {
                'src': '69.jpg'
            },
            {
                'src': '70.jpg'
            },
            {
                'src': '71.jpg'
            },
            {
                'src': '72.jpg'
            },
            {
                'src': '73.jpg'
            },
            {
                'src': '74.jpg'
            },
            {
                'src': '75.jpg'
            },
            {
                'src': '76.jpg'
            },
            {
                'src': '77.jpg'
            },
            {
                'src': '78.jpg'
            },
            {
                'src': '79.jpg'
            },
            {
                'src': '80.jpg'
            },
            {
                'src': '81.jpg'
            },
            {
                'src': '82.jpg'
            },
            {
                'src': '83.jpg'
            },
            {
                'src': '84.jpg'
            },
        ]
    }
    instAll()
    var warpper = document.querySelector('.warpper');

    window.onscroll = function () {
        if (isOk()) {
            //滚动条判断事件
            for (var i in data.dataimg) {
                //模拟请求,获得数据
                warpper.innerHTML += `
` } instAll() //调用排列 } } function instAll() { var warpper = document.querySelector('.warpper'); var html_w = document.documentElement.clientWidth || document.body.clientWidth; var boxs = document.querySelectorAll('.box'); //获取图片外包的盒子的总数 var box_w = boxs[0].offsetWidth; //获取单个box的宽度 var cols = Math.floor(html_w / box_w) //获取每行在当前宽度下可装的图片数 warpper.style.width = box_w * cols + 'px' //最大的盒子根据每个小盒子的宽度和数量来进行宽度赋予 var arr = []; for (var i = 0; i < boxs.length; i++) { if (i < cols) { //当i小于当前该行的个数时 arr.push(boxs[i].offsetHeight); //数组arr将这些数字装进 } else { var minH = Math.min.apply(Math, arr) //取数组中高度最小的值 var ind = arr.indexOf(minH); //获取当前最小值对应的下标 boxs[i].style.cssText = `position:absolute;top:${minH}px;left:${box_w*ind}px` //为最小值之后的值设置一个绝对定位,使该元素沿着最小值的高度往下排列 arr[ind] += boxs[i].offsetHeight //每次循环之后,当前的ind加上一个高度的值 } } } function isOk() { var boxs = document.querySelectorAll('.box'); var screen_h = document.documentElement.clientHeight || document.body.clientHeight; //获取当前可视窗口的高 var top = screen_h + document.documentElement.scrollTop || document.body.scrollTop; //下拉框的高+可视窗口的高的和即为总高度 var last_img = boxs[boxs.length - 1].offsetTop + boxs[boxs.length - 1].clientHeight/2 //最后一张图片底部离最上部的高度 return top > last_img ? true : false //判断,最后一张图片的高度超过top时,停止 } }

你可能感兴趣的:(js实现一个简易的瀑布流效果)