学习JS瀑布流的简单示例代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSSASS</title>
</head>
<body></body>
<script>
var metro = {
    //初始化数据。表示格子大小：1*1，1*2，2*3...
    sizeArray : [[1, 1], [1, 2], [2, 1], [2, 3], [1, 1], [1, 2], [1, 1], [2, 2], [1, 1]],
    //单元格尺寸
    gen: {
        w: 200,
        h: 180
    },
    //nameSpace的key用于判断对应的坐标位置有没被占有,我们就是要保证key是唯一的。而value就是最终设置的坐标了。
    nameSpace: {
        /* 1_0: [1,0] */
    }
};
metro.init = function () {
    metro.row = 1000 / metro.gen.w >> 0; //一行最多能排下的单元格个数/ 测试宽度以1000px计。
    metro.sort(metro.sizeArray);
};
metro.sort = function (size) {
    var x = 0,
        y = 0,
        memory = {
            flag: Infinity,
            x: Infinity,
            y: Infinity
        },
        name;
    for (var n = 0; n < size.length; n++) {
        if (memory.flag == 0) {
            x = memory.x;
            y = memory.y;
        }
        memory.flag--;
        if (x > metro.row - 1) { //换行
            x = 0;
            y ++;
        }
        name = x + '_' + y; //对象属性名（反映占领的格子）
        if (name in this.nameSpace) { //判断属性名是否存在
            n --;
            x ++;
            memory.flag < Infinity && memory.flag++;
            continue;
        }
        if (size[n][0] * size[n][1] == 1) { //普通格子
            metro.nameSpace[name] = [x, y]; //项值（反映坐标值）
            LOG(x, y, n, name, metro.nameSpace[name]); /* 显示及打印信息 */
            x++;
        } else { //大格子
            if (beOver(x, y, size[n])) {
                if (memory.y > y) {
                    memory.y = y;
                    memory.x = x;
                }
                if (memory.y < Infinity) memory.flag = 1;
                n --;
                x ++;
                continue;
            }
            metro.nameSpace[name] = [x, y];
            LOG(x, y, n, name, metro.nameSpace[name]); /* 显示及打印信息 */
            hold(x, y, n);
            x += size[n][0];
        }
        if (memory.flag == -1) memory = {
            flag: Infinity,
            x: Infinity,
            y: Infinity
        };
    };
    function beOver(x, y, item) { //判断是否会重叠
        var name;
        if (x + item[0] > metro.row) return true; //超出显示范围
        for (var k = 1; k < item[1]; k++) {
            name = x + '_' + (y - 0 + k);
            if (name in metro.nameSpace) return true; //左侧一列有无重叠
        }
        for (k = 1; k < item[0]; k++) {
            name = (x - 0 + k) + '_' + y;
            if (name in metro.nameSpace) return true; //上侧一行有无重叠
        }
        return false;
    };
    function hold(x, y, n) { //大格子多占的位置
        var item = metro.sizeArray[n];
        for (var t = 0; t < item[0]; t++) {
            for (var k = 0; k < item[1]; k++) {
                name = (x + t) + '_' + (y + k);
                if (t == 0 && k == 0) continue;
                metro.nameSpace[name] = 0; //多占的格子无坐标值
                LOG_2(n ,name);
            }
        }
    };
};
metro.init();
function LOG(x, y, n, key) {
    //用于显示
    var left = metro.gen.w * x,
        top = metro.gen.h * y,
        width = metro.sizeArray[n][0] * metro.gen.w,
        height = metro.sizeArray[n][1] * metro.gen.h;
    var box = document.createElement("div");
    box.id = "ID" + n;
    box.innerHTML = "<h3>" + n +"</h3>" + key + ":(" + metro.nameSpace[key] + ")<br/>";
    box.style.cssText = "position:absolute;border:1px solid #333;left:" + left + "px;top:" + top + "px;width:" + width + "px;height:" + height + "px;";
    document.body.appendChild(box);
}
function LOG_2(n, key){
    //大格子多占位置的信息。
    document.getElementById("ID" + n).innerHTML +=  key + ":(" + metro.nameSpace[key] + ")<br/>";
}
</script>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

学习JS瀑布流的简单示例代码

分类

表格图层

描述

应网友的要求，弄了这个简单的瀑布流基础代码，距离真正的瀑布流只一步之遥，用了JS，测试了下，在chorme下也是可以运行的，先引进门，剩余的工作相信你就明白如何了。