JS+div自动布局

最新推荐文章于 2022-03-27 13:03:39 发布

anyong3

最新推荐文章于 2022-03-27 13:03:39 发布

阅读量1.4k

点赞数 1

分类专栏： css js 布局文章标签： div class css框架 stylesheet float function

本文链接：https://blog.csdn.net/anyong3/article/details/7091824

版权

css 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

布局

1 篇文章 0 订阅

订阅专栏

网上找过很多用CSS+div做布局的例子，也看了不少CSS框架（960，YUI等），效果不错，可惜大部分都是在展示型网站中使用，不太适合在自己的项目使用。
所以打算自己写一个JS脚本，通过设定div的classname就能实现框架布局。
目前只是个DEMO，没做太多的兼容性测试，也没测试过效率如何，以后慢慢改进吧。

使用说明：
1.创建一个空的HTML文件，引入mycss.css和mylayout.js两个外部文件和jquery.js文件。
2.在body元素下面建一个<div class="div_root"></div>。
3.在<div class="div_root"></div>里面加入三个div，第一个和第三个div高度固定，第二个高度自动填充。像这个样子：
<div class="div_root">
<div class="div_row" id="head" style="height:100px;background-color:Blue;"></div>
<div class="div_row_autoheight" id="body" style="background-color:Yellow;"></div>
<div class="div_row" id="foot" style="height:80px;background-color:Red;"></div>
</div>
4.在<div class="div_row_autoheight" id="body" style="height:100px;background-color:Yellow;"></div>里面加入两个div，第一个宽度固定，第二个宽度自动填充。像这个样子：
<div class="div_row_autoheight" id="body" style="background-color:Yellow;">
<div class="div_col" id="sider" style="width:200px;background-color:White;"></div>
<div class="div_col_autowidth" id="container" style="background-color:Black;"></div>
</div>
5.运行一下，框架已经搭起来了，浏览器大小变更也能自动适应。
6.所有的div中都能再循环内嵌布局div，只要设定好对应的classname即可。

注意事项：
1.body元素下的第一个子元素必须为<div class="div_root"></div>
2.同层的div元素要么都是div_row或者div_row_autoheight;要么都是div_col或者div_col_autowidth。同层元素row和col不可混杂。
3.同层的div元素中只能有一个div_row_autoheight或只能有一个div_col_autowidth。
4.不支持在布局div中设置边框，边距和内边距。这些样式请在布局div中的子元素自己设置。

ps：这种布局框架比较适合做后台管理型的系统。

以下是源代码：

mycss.css

body
{
    height:100%;
    margin:0px;
}
div.div_root
{
    min-height:720px;
    min-width:960px;
}
div.div_row
{
    float:none;
    width:100%;
}
div.div_row_autoheight
{
    float:none;
    width:100%;
}
div.div_col
{
    float:left;
    height:100%;
}
div.div_col_autowidth
{
    float:left;
    height:100%;
}

mylayout.js

window.onload = window.onresize = function () {
    var div_root = $('div.div_root');
    AutoFix(div_root);
}
//文档可见高度
function windowHeight() {
    var de = document.documentElement;
    return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}
function AutoFix($div) {
    //判断当前元素的类名
    var clsName = $div.attr("class");
    if (!clsName)
        return;
    //根元素
    if (clsName.search("div_root") >= 0) {
        $div.css("height", windowHeight());
    }
    //自动高度行
    else if (clsName.search("div_row_autoheight") >= 0) {
        //获取父对象容器
        var $parentContainer = $div.parent("div");
        //计算父容器对象的内部实际高度
        var parentHeight = $parentContainer.height();
        //获取父窗体内其他div的高度总和
        var totalHeight = 0;
        var dilist = $parentContainer.children("div.div_row");
        for (var i = 0; i < dilist.length; i++) {
            //计算其他元素外部实际高度
            totalHeight += $(dilist[i]).outerHeight(true);
        }
        $div.css("height", parentHeight - totalHeight);
    }
    //自动宽度
    else if (clsName.search("div_col_autowidth") >= 0) {
        //获取父对象容器
        var $parentContainer = $div.parent("div");
        //计算父容器对象的内部实际宽度
        var parentWidth = $parentContainer.width();
        //获取父窗体内其他div的宽度总和
        var totalWidth = 0;
        var dilist = $parentContainer.children("div.div_col");
        for (var i = 0; i < dilist.length; i++) {
            //计算其他元素外部实际宽度
            totalWidth += $(dilist[i]).outerWidth(true);
        }
        $div.css("width", parentWidth - totalWidth);
    }
    //递归调用
    var childList = $div.children("div.div_col_autowidth,div.div_col,div.div_row_autoheight,div.div_row");
    for (var i = 0; i < childList.length; i++) {
        AutoFix($(childList[i]));
    }
}

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/MyStyle.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/MyLayout.js" type="text/javascript"></script>
</head>
<body>
<div class="div_root">
<div class="div_row" id="head" style="height:100px;background-color:Blue;"></div>
<div class="div_row_autoheight" id="body" style="background-color:Yellow;">
<div class="div_col" id="sider" style="width:200px;background-color:White;"></div>
<div class="div_col_autowidth" id="container" style="background-color:Black;"></div>
</div>
<div class="div_row" id="foot" style="height:80px;background-color:Red;"></div>
</div>
</body>
</html>

anyong3

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS+div自动布局

网上找过很多用CSS+div做布局的例子，也看了不少CSS框架（960，YUI等），效果不错，可惜大部分都是在展示型网站中使用，不太适合在自己的项目使用。所以打算自己写一个JS脚本，通过设定div的classname就能实现框架布局。目前只是个DEMO，没做太多的兼容性测试，也没测试过效率如何，以后慢慢改进吧。使用说明：1.创建一个空的HTML文件，引入mycss.css和myla
复制链接

扫一扫

专栏目录