模拟瀑布流效果（附带注释）

　　

//获取标签图片
var container = document.getElementById('container');
var box = container.children;

//判断可视区域能显示多少列

//获取可视窗口宽度
var winWidth = window.innerWidth;
// 获取box宽度 因为都一样宽 所有随便选一个就可以获取
var boxWidth = box[35].offsetWidth;
//  计算能够显示多少列
var column = parseInt(winWidth / boxWidth);
//定义一个空数组用来存每列box的高度
var boxHeight = [];

//遍历box
function waterFull() {
    for (var i = 0; i < box.length; i++) {
        //判断是否是地一行
        if (i < column) {
            //是， 把这一行的高度添加到数组中,每个代表这一列的高度
            boxHeight[i] = box[i].offsetHeight
        } else {
            //第二行及以后
            // 把他放到缺口中（上一行高度最小的）
            //先找到上一行最矮的高度,下标和距左面距离
            //最矮的
            var minBoxHeight = Math.min.apply(null, boxHeight);
            // 他的下标
            var minBoxIndex = boxHeight.indexOf(minBoxHeight)
            //他距离左面的距离
            var minBoxLeft = box[minBoxIndex].offsetLeft;
            // 把下一行的位置放到这里
            box[i].style.position = 'absolute';
            box[i].style.top = minBoxHeight + 'px';
            box[i].style.left = minBoxLeft + 'px';
            //更新数组
            //把最小的列的高度更新
            boxHeight[minBoxIndex] = minBoxHeight + box[i].offsetHeight;
        }
    }
}
waterFull();

window.onscroll = function () {
    //当最后一个box进入可视窗口时添加新的box以免出现空白
    //获取浏览器可视窗口高度
    var winHeight = window.innerHeight;
    // 浏览器头部卷去高度
    var scrollTop = window.pageYOffset;
    // 最后一个box距离页面顶端距离
    var endBoxTop = box[box.length - 1].offsetTop;
    //判断最后一个box是否进入可视窗口
    if (winHeight + scrollTop >= endBoxTop) {
        //最后一张出现,动态追加box
        json.forEach(element => {
            var newDiv = document.createElement('div');
            var newImg = document.createElement('img');
            newImg.src = element.src;
            newDiv.className = 'box';
            container.appendChild(newDiv);
            newDiv.appendChild(newImg);
            waterFull();
        });
    }
}


var json = [{        "src": "./images/P_001.jpg"    },
    {        "src": "./images/P_002.jpg"    },
    {        "src": "./images/P_003.jpg"    },
    {        "src": "./images/P_004.jpg"    },
    {        "src": "./images/P_005.jpg"    },
    {        "src": "./images/P_006.jpg"    },
    {        "src": "./images/P_007.jpg"    },
    {        "src": "./images/P_008.jpg"   },
    {        "src": "./images/P_009.jpg"    }
]

　　

转载于:https://www.cnblogs.com/cola1orz/p/11097745.html