[JavaScript知识库]java前端总结14

?尝试理解了一下

var falls = {
    //每列当前的高度
    topArry: [],
    //每列当前距离浏览器的左边距
    leftArry: [],
    //每次加载的图片
    imgArray: [],
    //每次加载的第一张图片相对于所有图片（包括已加载图片）的索引
    num: 0,
    //加载图片数
    dataNum: 0,
    //图片列数
    cols: 0,
}

//初始化函数
$(function () {
    start();
});

function start(){
    init();
    run();
    window.onscroll = function () {
        var minHeight = getMinHeight();
        if (checkWillLoad()) {
            run();
        }
    }
}

//使用JSON数据模拟从后台获取图片数据
function getData() {
    return $.getJSON("json/falls.json", function (data) {    //此处返回一个jquery的promise对象
        if (data.success) {
            var row = data.row,
                html = "",
                len = row.length;
            falls.dataNum += len;

            //将获取到的数据通过字符串连接的方式添加到 html 内容中
            for (var i = 0; i < len; i++) {
                html += "<div class='img-box'><img src='" + row[i].src + "'/></div>";
            }
            $("#container").append(html);
        }
    });
}

//初始化函数（主要初始化：列数，每列左偏移，每列高度置为0）
function init() {
    getData().then(function () {
        var $boxs = $("#container .img-box");
        falls.cols = Math.floor($("#container").width() / $boxs.eq(0).width());
        for (var i = 0; i < falls.cols; i++) {
            var left = $boxs.eq(i).offset().left;
            falls.leftArry.push(left);
            falls.topArry[i] = 0;
        }
    });
}

//主要运行函数
function run() {
    getData().then(function () {
        //修改每张图片的位置
        reset();
    });
}

//获取所有列中的最小高度列
function getMinHeight() {
    var minHeight = Math.min.apply(null, falls.topArry);
    return minHeight;
}

//reset用于对图片进行重新定位
function reset() {
    var $boxs = $("#container .img-box");
    falls.imgArray = [];
    $boxs.each(function (i) {
        if (i >= falls.num) {      //这里我们只需要拿到新的没有定位过的图片，不用重新定位所有的，提升性能
            falls.imgArray.push(this);
        }
    });
    falls.num += falls.dataNum;
    var img = falls.imgArray;
    for (var i = 0, len = img.length; i < len; i++) {
        var minHeight = getMinHeight(),
            index = 0;
        //为了取到高度最小列的角标
        for (var x = 0; x < falls.cols; x++) {
            if (minHeight == falls.topArry[x]) {
                index = x;
                break;
            }
        }
        //重新定位
        $(img[i]).css({
            "position": "absolute",
            "top": minHeight,
            "left": falls.leftArry[index]
        });
        //更新最短列
        falls.topArry[index] += $(img[i]).height();
    }
    falls.dataNum = 0;
    //可确保不同的显示器屏幕能初始化时便将图片布满屏幕
    if (getMinHeight() < window.screen.height) {
        setTimeout(function () {      //确保浏览器已经重排完毕，否则会出现一些图片叠加在一起
            run();
        }, 1)
    }
}

//判断是否加载图片的条件：最后一张图片顶部相对于页面的位置<=文档高度+滚动条的垂直位置
function checkWillLoad(){
    var lastBox = $("#container .img-box").last();
    var topOffset = $(lastBox).offset().top;
    var screenHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    return topOffset <= screenHeight + scrollTop;
}