Javascript 当window.innerwidth更改时，如何动态更改html表（每行的项目数）布局？_Javascript_Html Table_Window_Width_Innerhtml

Javascript 当window.innerwidth更改时，如何动态更改html表（每行的项目数）布局？

javascript

Javascript 当window.innerwidth更改时，如何动态更改html表（每行的项目数）布局？,javascript,html-table,window,width,innerhtml,Javascript,Html Table,Window,Width,Innerhtml,我有许多链接要以表格格式显示。我已经编写了一些javascript，根据窗口的宽度，每行中都有大量的链接。这在加载页面时效果很好，但如果在页面加载后调整宽度，则不会调整新宽度的布局。如果页面宽度发生变化，如何让表格重新调整自身请原谅代码的长度。我想在中留下一些条目，以便您可以看到效果。每个条目都是相同的代码您将在代码中看到，如果宽度发生变化，我试图简单地刷新页面，但这似乎不起作用。onResize=window.location.reload 家桌子{ 保证金：自动；表布局：固定；

我有许多链接要以表格格式显示。我已经编写了一些javascript，根据窗口的宽度，每行中都有大量的链接。这在加载页面时效果很好，但如果在页面加载后调整宽度，则不会调整新宽度的布局。如果页面宽度发生变化，如何让表格重新调整自身

请原谅代码的长度。我想在中留下一些条目，以便您可以看到效果。每个条目都是相同的代码

您将在代码中看到，如果宽度发生变化，我试图简单地刷新页面，但这似乎不起作用。onResize=window.location.reload

家桌子{ 保证金：自动；表布局：固定；宽度：100%；左边缘：0%；文本对齐：居中； } 运输署{ 垂直对齐：顶部； } thumbImg先生{ 保证金：自动；宽度：100%；宽度：140px；高度：140像素；背景位置：中心；背景重复：无重复；背景尺寸：封面； } .描述{ 字体大小：20px；字体大小：粗体； } var i=0； var vwidth=window.innerWidth； var resultsPerRow=Math.floorvwidth/170； i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； } i++；如果i%resultsPerRow==0{ 文件。书写； }

省去很多麻烦，使用现有的css技术来实现这一点

我只是把桌子移走，把每个单元格都做成一个。此外，我还使用css flexbox属性display:flex；封闭类行；。与flex flow相结合：行换行；这正是你想要的

有关flexbox的全面指南，请参阅本网站：

这段代码只是一个概念证明，您可能需要修复一些布局

家 thumbImg先生{ 保证金：自动；宽度：100%；宽度：140px；高度：140像素；背景位置：中心；背景重复：无重复；背景尺寸：封面； } .描述{ 字体大小：20px；字体大小：粗体； } .行{ 显示器：flex；柔性流：行换行； }

感谢@theblackips的贡献-这是一个非常有用的技巧。我最终使用jquery方法来获得我想要的布局。我使用jquery.load将外部文件的内容插入到表标记中。给定窗口的宽度，每个外部文件都有正确的布局

<html>

<head>
<title>Home</title>
<script type="text/javascript" src="Homepage_content/jquery.min.js"></script>
<style>
table {
    margin: auto;
    table-layout: fixed;
    width: 100%;
    margin-left: 0%;
    text-align:center;
}



td {
    vertical-align: top;
}

.thumbImg {
    margin: auto;
    width:100%;
    width: 140px;
    height: 140px;
    background-position: center center;
    background-repeat: no repeat;
    background-size: cover;
}

.descript {
    font-size: 20px;
    font-weight: bold;
}
</style>

<script>
function Reloader() {
    var vwidth = window.innerWidth;
    if (vwidth <= 340){
        $('#links').load('Homepage_content/table1.html');
    }
    else if (vwidth <= 510){
        $('#links').load('Homepage_content/table2.html');
    }
    else if (vwidth <= 680){
        $('#links').load('Homepage_content/table3.html');
    }
    else if (vwidth <= 850){
        $('#links').load('Homepage_content/table4.html');
    }
    else if (vwidth > 1020){
        $('#links').load('Homepage_content/table5.html');
    }
}
</script>
</head>

<body onLoad="Reloader()" onResize="Reloader()">
<img src="Homepage_content/bbg.jpg" id="fauxbg"/>
<div>
<br/>
<table id="links">
</table>


</div>
</body>
</html>