如何在 window.innerwidth 更改时动态更改 html table（每行的项目数）布局？

Question

我有一些链接要以 table 格式显示。我写了一些 javascript 以在每一行中有大量链接，具体取决于 window 的宽度。这在页面加载时效果很好，但如果在页面加载后调整宽度，它不会为新宽度调整布局。 如果页面宽度发生变化，我如何让 table 重新调整自身？

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

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

    <html>
    
    <head>
    <title>Home</title>
    <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>
    </head>
    
    
    
    <body onResize="window.location.reload()">
    
    <div>
    
    <script>
    var i = 0 ;
    var vwidth = window.innerWidth;
    var resultsPerRow = Math.floor(vwidth / 170);
    </script>
    
    <br/>
    <table>
    <tr>
    
    <td><a href="Homepage_content/101.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">101</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) { 
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/102.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">102</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) { 
    document.write("</tr><td><br></td><tr>");
    }
    </script>

    <td><a href="Homepage_content/103.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">103</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) {
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/104.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">104</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) { 
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    
    <td><a href="Homepage_content/201.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">201</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) { 
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/202.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">202</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) { 
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/203.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">203</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) { 
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/204.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">204</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) { 
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/301.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">301</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) { 
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/302.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">302</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) {  
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/303.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">303</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) {
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/304.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">304</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) {  
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/401.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">401</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) { 
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/402.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">402</span>
    <br>
    </a>
    </td>
    
    <script>
    i++;
    if (i % resultsPerRow == 0) {  
    document.write("</tr><td><br></td><tr>");
    }
    </script>
    
    <td><a href="Homepage_content/403.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
    </div>
    <br>
    <span class="descript">403</span>
    <br>
    </a>
    </td>
    
    
    </tr>
    </table>
    
    
    </div>
    </body>
    </html>

Answer 1

使用现有的 css 技术，省去很多麻烦。

我刚刚删除了 table 并将每个单元格设为 <div>。我还给封闭的<div> class row 和 css flexbox 属性 display: flex;。结合 flex-flow: row wrap; 这正是你想要的。

有关 flexbox 的综合指南，请参阅此站点：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

此代码只是概念验证，您可能需要修复一些布局。

<html>

<head>
  <title>Home</title>
  <style>
    .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;
    }
    
    .row {
      display: flex;
      flex-flow: row wrap;
    }
  </style>
</head>



<body>

  <div class="row">

    <div>
      <a href="Homepage_content/101.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">101</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/102.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">102</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/103.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">103</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/104.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">104</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/101.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">101</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/102.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">102</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/103.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">103</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/104.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">104</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/101.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">101</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/102.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">102</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/103.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">103</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/104.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">104</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/101.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">101</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/102.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">102</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/103.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">103</span>
        <br>
      </a>
    </div>

    <div>
      <a href="Homepage_content/104.html">
        <div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
        </div>
        <br>
        <span class="descript">104</span>
        <br>
      </a>
    </div>

  </div>
</body>

</html>

Answer 2

感谢@theblackips 的贡献 - 这是一项非常有用的技术。我最终采用 jquery 方法来获得我想要的布局。我使用 jquery.load 将外部文件的内容插入到 table 标记中。给定 window.

的宽度，每个外部文件都有正确的布局

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

如何在 window.innerwidth 更改时动态更改 html table（每行的项目数）布局？

How can I dynamically change an html table (number of items per row) layout when the window.innerwidth changes?

javascript

html-table

window

innerhtml

width