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

>首页 -> 社会专题 -> 代码效果 2011-02-20 来源: 作者: 【大中小】浏览:1143次评论:0条

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

<!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>

提示：您也可以先修改部分代码再运行！

您看到此篇文章时的感受是：

Tags：

责任编辑：佚名

【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

酒精度

顶一下

上一篇：一个高宽自适用100%,部分高度固定..

下一篇：CSS垂直，水平居中

手机扫描

空间赞助

快速互动

有事联系

统计联系

版权与建议