window.onresize监听事件

最近忙于第二版网站功能bug制作修改，交互逻辑完成，但是准备换一下布局和整体色调，算是一次小改，趁机会把一直没有实现的功能抽时间解决了下——自适应屏幕高度。

页面的整体布局如图基本分为3个div：（网站具体页面截图不透露了，以3个div演示）

最上方的蓝色部分为导航栏，中间带图像的浅色区域为交互显示区域，，底部蓝色区域为缩略图区域。

因为是做人工智能医疗的网站，交互的东西会多一些，图中的片子是b超甲状腺的影像，可以进行画笔、圈取病变、ct影像还有调节影像窗宽窗位的功能、等等。底部的缩略图会显示当前病例的文件（1~n张图像）的缩略图。

最开始只想到了屏幕宽度的自适应，因为根据屏幕不同的宽度，绘制不同数量的缩略图。但在实际测试中发现在不同屏幕上，画布canvas的长度和宽度是固定的，也就造成大屏幕上正好一屏显示了，小屏幕笔记本，一屏显示不下。

就造成，无限的滚动查看屏幕（切换缩略图，canvas交互，导航栏工具使用，三部分的切换），体验感很差。

最近有时间修正了一下这个bug，无论在任何分辨率的屏幕上都正好盛满一整屏幕。

最初的想法就是直接设置div百分比不就行了？这种办法可行，但不适用我的网站，很简单的实现方法有局限性

<html>
<head>
<style type="text/css">
html,body{height:100%; width:100%; overflow:hidden; margin:0;
padding:0;}
.main{width:100%; height:100%; overflow:hidden; margin:0;padding:0;}
.div1{width:100%; height:80px; color:#fff;background-color:#369; text-align:center;}
.div2{width:100%; height:100%;color:#fff;background-color:#FF0000;text-align:center;"}
</style>
</head>
<body>
<div class="div1">
  div1
</div>
<div class="main">
  <div class="div2">
    div2
  </div>
</div>
</body>
</html>

可以复制代码去看一下，就不截屏了，这个方法只限于小部分：div.main是撑满屏幕100%的，也不是完全充满，在先绘制div1后，剩下屏幕的位置会全部充满，也就是说，如果mian后边还有div，那就直接下一屏幕了，当前屏幕已经被div1:100px；和剩下的main100%沾满了。按照这样实现底下的缩略图没有了，如果给main设置个80%或者90%，也不能无缝的实现。

最后还是要js动态实现，实现第一版：div根据屏幕初始高度自适应，基本功能实现，但是高度的设置只限于documen.ready,完成后，调整浏览器的尺寸，div固定大小了，并没有动态调整。有没有一种监听浏览器窗口变化的事件呢？后来上网查询，查到了windows.onresize这个api，经过调整最终实现了功能。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
    </style>
</head>
<body>
  <div style="100%;height:100px;background-color:blue;">
    @01
  </div>
  <div id="main" style="background-color: lightblue; 100%;height:100px;">
<div id="show_div" style="background-color: lightblue; 100%;height: 100%;text-align:center;">
  <canvas id ="canvas"  style="720px; height: 100%;z-index:2;"></canvas>
</div>
</div>
<div style="100%;height:100px;background-color:blue;">
  @03
</div>

</body>
</html>

js代码:

<script>
var cv=document.getElementById("canvas");
var context=cv.getContext("2d");

$(document).ready(function() {
 
  var clientheight=document.documentElement.clientHeight;
  console.log(clientheight);
  console.log("
 %c Feng V1.0 %c 

","color: #fadfa3; background: #4f98fd; padding:5px 0;","background: #fadfa3; padding:5px 0;");
  $("#main").get(0).style.height=clientheight-200+"px";
  $("#canvas").get(0).style.width=(clientheight-200)*1.25+"px";
  console.log($("#main").get(0).style.height);


 var imgLoad=new Image();
  imgLoad.src = "001.jpg";
    imgLoad.onload = function (){
      context.clearRect (0 , 0 , canvas.width , canvas.height ) ;
      context.drawImage (imgLoad,0,0,canvas.width,canvas.height) ;
      console.log("imgLoad."+imgLoad.width);
      console.log("imgLoad.height:"+imgLoad.height);
    }
});
    window.onresize = change;
    function change(){
      var clientheight=document.documentElement.clientHeight;
      console.log(clientheight);
      $("#main").get(0).style.height=clientheight-200+"px";
       //图像尺寸为5:4，这里给width也做一个动态调整。
      $("#canvas").get(0).style.width=(clientheight-200)*1.25+"px";
      console.log($("#main").get(0).style.height);
    }
</script>

有两点注意：每一次d都要重新为clientheight赋值，网上说在谷歌浏览器里，windows.onresize会执行两次，我没有遇到，如果遇到这个情况，设置一个判断即可