JavaScript实现页面元素自适应布局

JavaScript实现页面元素自适应布局

在某些场景下，我们需要实现类似新版Yahoo邮箱的效果，使数据显示区域能够根据浏览器窗口的大小自动调整。虽然纯CSS控制有时难以完美达成这一目标，但借助JavaScript可以轻松实现常见的页面自适应效果。例如，在iSunXoft的HR开源项目中就应用了此类技术。

实现原理:

核心思路是获取IE显示屏幕的宽高，确定哪些对象采用绝对定位且位置固定，哪些不固定，以及哪些元素的长宽是固定的。随后，像设计Windows Form程序界面一样，根据软件界面的大小动态调整相关对象的长宽和绝对位置等属性。由于Web程序无法实时检测窗口大小的变化，因此需要通过SetTimeout函数进行隔时递归调用来实现自适应效果。

以下是摘自iSunXoft HR开源项目SysForm.aspx中实现自适应的方法代码。

注:$("")是有变化的元素。

var h;

var w;

function resize()

var he = document.body.offsetHeight;

var wi = document.body.offsetWidth;

if($("DataTable").style.display.toLowerCase()==""||$("DataTable").style.display.toLowerCase()=="inline")

if (h==he&&w==wi)

if($("leftMenu").style.display.toLowerCase() == "none" )

$("DivDataList").style.width = wi - 30;

else

$("DivDataList").style.width = wi - 223;

setTimeout("resize()",1000);

return;

h = he;

w = wi;

if (he>100)

$("DivDataList").style.height = he - 172;

if(wi>200)

$("DivDataList").style.width = wi - 223;

if($("leftMenu").style.display.toLowerCase() == "none" )

$("DivDataList").style.width = wi - 30;

if($("DataEmpWidows").style.display.toLowerCase()=="inline"||$("DataEmpWidows").style.display.toLowerCase()=="")

if (h==he&&w==wi)

if($("leftMenu").style.display.toLowerCase() == "none" )

$("DataEmpWidows").style.width = wi - 30;

else

$("DataEmpWidows").style.width = wi - 223;

h = he;

w = wi;

if (he>150)

$("DataEmpWidows").style.height = he - 132;

if(wi>200)

$("DataEmpWidows").style.width = wi - 223;

if($("leftMenu").style.display.toLowerCase() == "none" )

$("DataEmpWidows").style.width = wi - 30;

if(typeof($("EipWindows")) != "undefined")

//if($("EipWindows").style.display.toLowerCase()=="inline")

// if (h==he&&w==wi)

// if($("leftMenu").style.display.toLowerCase() == "none" )

// $("EipWindows").style.width = wi - 30;

// else

// $("EipWindows").style.width = wi - 223;

// h = he;

// w = wi;

// if (he>150)

// $("EipWindows").style.height = he - 132;

// if(wi>200)

// $("EipWindows").style.width = wi - 223;

// if($("leftMenu").style.display.toLowerCase() == "none" )

// $("EipWindows").style.width = wi - 30;

setTimeout("resize()",1000);

resize();

然后在网页上调用resize();一旦窗口大小有变化,或是分辩率有变化,都能确保能够实现真正意义上的自适应.