Javascript 列表和页面顶部之间的空间

我正在使用一个我在网站上找到的设计，它看起来很酷，但我想把它改成我需要的样子

最初的演示是这样的

但我需要它们并排，所以我创建了一个宽度为100%的表，有两列。我把这两张单子都放在桌子上，但奇怪的事情发生了

我检查过了，上面没有填充物，也没有其他物体。列表和表格都设置为v-align。我附上了一个更好的参考和帮助

非常感谢大家

<table width="100%" border="0">
<tbody valign="top">
<tr valign="top">
  <td valign="top">
  <ul class="tabs">
      <li class="tabs__item color1">
        <h2><span>[Review] The New LG G18</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color2">
        <h2><span>[ROM][8.3.1] SlimSaber R31</span> </h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color3">
        <h2><span>[APP] Goo Simulator Extreme</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color4">
        <h2><span>[Tutorial] Pooping Your Pants</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <div class="views-toggle views-toggle--hidden">
        <svg fill="white" viewBox="0 0 24 24">
          <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/>
          <path d="M0 0h24v24h-24z" fill="none"/>
        </svg>
      </div>
    </ul>
    <script       src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="js/index.js"></script> 
  </td>
  <td valign="top">
  <ul class="tabs">
      <li class="tabs__item color1">
        <h2><span>[Review] The New LG G18</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color2">
        <h2><span>[ROM][8.3.1] SlimSaber R31</span> </h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color3">
        <h2><span>[APP] Goo Simulator Extreme</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <li class="tabs__item color4">
        <h2><span>[Tutorial] Pooping Your Pants</span></h2>
        <p class="tabs__stats">Content</p>
      </li>
      <div class="views-toggle views-toggle--hidden">
        <svg fill="white" viewBox="0 0 24 24">
          <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/>
          <path d="M0 0h24v24h-24z" fill="none"/>
        </svg>
      </div>
    </ul>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="js/index.js"></script> 
  </td>
 </tr>
 </tbody>
  </table>

[回顾]新LG G18
内容



[ROM][8.3.1]SlimSaber R31
内容



[应用程序]Goo Simulator Extreme
内容



[教程]拉屎
内容





[回顾]新LG G18
内容



[ROM][8.3.1]SlimSaber R31
内容



[应用程序]Goo Simulator Extreme
内容



[教程]拉屎
内容

这里的问题是javascript根据框在列表中的索引设置框在页面下方的显示距离

 transY     = index * 10;

我已经保存了fiddle（）的一个副本，但以下是需要进行的更改：

将id添加到两个无序列表中：

 <ul class="tabs" id="list1">

 <ul class="tabs" id="list2">

同样在javascript中，更改以下内容：

 tabs.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

为此：

 tabs1.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

 tabs2.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

---

我们在这里做的是为这两列获取两个单独的列表。然后我们运行javascript，根据两个单独的列表设置框的位置，因此当它使用索引时，每列从0开始，这里的问题是javascript根据框在列表中的索引设置框在页面下方的显示距离，而不是继续第二列（第一列已结束）。

 transY     = index * 10;

我已经保存了fiddle（）的一个副本，但以下是需要进行的更改：

将id添加到两个无序列表中：

 <ul class="tabs" id="list1">

 <ul class="tabs" id="list2">

同样在javascript中，更改以下内容：

 tabs.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

为此：

 tabs1.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

 tabs2.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

---

我们在这里做的是为这两列获取两个单独的列表。然后，我们运行javascript根据两个单独的列表设置框的位置，因此当它使用索引时，每列的索引将从0开始，而不是继续在第二列中，其中第1列已结束。

这是moveTabs函数中需要的代码

 var indexOffset = 0;       
  tabs.each(function(index) {
    if ($(this).hasClass('tabs__first'))
       indexOffset = index-1;

    transY  = (index-indexOffset) * 10;        
    scale       = 0.5 + (index-indexOffset)/25;

然后首先将选项卡添加到要“重置”的第一个项目的类中

这是如何运作的--

• 在循环中，我检查第一个标记的制表符 当我看到它时，我将偏移量设置为比索引小一

• 当对项目进行转换而不是使用索引进行转换时（就像原始代码那样），我使用index indexOffset

---

fiddle-

这是moveTabs函数中需要的代码

 var indexOffset = 0;       
  tabs.each(function(index) {
    if ($(this).hasClass('tabs__first'))
       indexOffset = index-1;

    transY  = (index-indexOffset) * 10;        
    scale       = 0.5 + (index-indexOffset)/25;

然后首先将选项卡添加到要“重置”的第一个项目的类中

这是如何运作的--

• 在循环中，我检查第一个标记的制表符 当我看到它时，我将偏移量设置为比索引小一

• 当对项目进行转换而不是使用索引进行转换时（就像原始代码那样），我使用index indexOffset

在javascript中使用fiddle-

  tabs.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

永远不会被重置，因此您正在转换第二列，就像它们被添加到第一列一样

设置“transY”需要更好的逻辑。目前，您正在根据“选项卡”列表的索引进行设置，因此选项卡1为10vh，选项卡2为20vh，选项卡7为70vh

一个简单易懂的解决方案 如果您知道每列始终有4个“制表符”，您可以通过将上述内容修改为：

  tabs.each(function(index) {
    transY  = (index%4) * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

否则，您需要修改设置“选项卡”y位置背后的逻辑，使其不完全基于“选项卡”的数量。这只是为了教育目的，向您展示为什么您的逻辑是错误的，以及一个不使用复杂技术的简单解决方案

编辑：

使用Jquery树导航的解决方案 一个非硬编码的解决方案，有点复杂。逻辑是抓取每个“tabs”列表，对于该“tabs”列表中的每个子元素，使用类“tabs\uu item”抓取每个列表元素，并基于该类转换它们的高度。这是100%模块化的，适用于任何数量的“标签”中的任何数量的“标签项目”，不需要修改CSS文件或更改当前结构

  $('.tabs').each(function(index) {
      $(this).children('li.tabs__item').each(function(index) {
          transY    = index * 10;        
          scale     = 0.5 + index/25;

          transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
      });
   });

JS Fiddle链接：

在javascript中

  tabs.each(function(index) {
    transY  = index * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

永远不会被重置，因此您正在转换第二列，就像它们被添加到第一列一样

设置“transY”需要更好的逻辑。目前，您正在根据“选项卡”列表的索引进行设置，因此选项卡1为10vh，选项卡2为20vh，选项卡7为70vh

一个简单易懂的解决方案 如果您知道每列始终有4个“制表符”，您可以通过将上述内容修改为：

  tabs.each(function(index) {
    transY  = (index%4) * 10;        
    scale       = 0.5 + index/25;

    transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
  });

否则，您需要修改设置“tabs”y位置背后的逻辑，使其不完全基于