在无限滚动页面中加载不同维度的表格，同时最小化表格之间的空白空间

Posted 2023-03-05

【中文标题】在无限滚动页面中加载不同维度的表格，同时最小化表格之间的空白空间

【英文标题】：Loading tables of different dimensions in infinite scroll page while minimizing empty space between tables

【发布时间】：2014-03-06 03:30:23

【问题描述】：

我有一个网站，用户可以在其中贡献内容。内容采用表格的形式，其中每个 td 元素的高度和宽度相等。不同的内容具有不同的行数和列数。我想将这些元素堆叠在无限滚动网页中。 ATM 我正在​​这样做：我构建了一个表，其中包含一个 tr。我在 tds 中逐个元素地加载元素并计算它们的列数。当达到某个阈值时，我打破 tr 并开始一个新的 tr。这使得内容元素彼此相邻，彼此之间没有空间。但是，我也想以这样一种方式加载元素，即垂直元素之间的空间最小。我怎样才能做到这一点？

这是我的代码。我不希望它被重写或为我编写新代码。这只是为了让您更清楚我目前在做什么。

    <?php

    $row = 0;
    $column = 0;
    $maxColumns = 124;

    echo "<table><tr>";



    $listHandle = fopen('pieces/piecesList', 'r');
    while (!feof($listHandle))           

        echo "<td>";

        $filename = trim(fgets($listHandle));        
        $templateHandle = fopen("pieces/" . $filename, 'r');
        $thisLine = fgets($templateHandle);     
        list($lowestX, $highestX, $lowestY, $highestY) = sscanf($thisLine, '%d %d %d %d');
            //echo $lowestX .  $highestX . $lowestY . $highestY;
        $templateTable = "<table id=\"" . $filename . "\" title =\"" . $filename . "\">" . PHP_EOL;
        $greenCells = array();

        $fileLength = 0;

        while (!feof($templateHandle))                 
            $thisLine = fgets($templateHandle);         
            list($thisX, $thisY) = sscanf($thisLine, '%d %d');
            $carrier = $thisX . " " . $thisY;
            array_push($greenCells, $carrier);
            $fileLength++;
        

        for ($y = $lowestY; $y <= $highestY; $y++) 
             //   echo "inside for loop Y \n";
            $templateTable = $templateTable . "<tr>" . PHP_EOL;
            for ($x = $lowestX; $x <= $highestX; $x++) 

              //  echo $y . $x;
                $templateTable = $templateTable . "<td";
                $coordinateExists = FALSE;
                for ($i = 0; $i < $fileLength; $i++) 
                    if ($greenCells[$i] == $x . " " . $y) 
                        $coordinateExists = TRUE;
                        break;
                    
                


                if ($coordinateExists) 
                    $templateTable = $templateTable . " class=\"green";
                    if ($x == 0 && $y == 0) 
                        $templateTable = $templateTable . " markerdot";
                    
                    $templateTable = $templateTable . "\"";
                 else if ($x == 0 && $y == 0) 
                    $templateTable = $templateTable . " class=\"markerdot\"";
                

                $templateTable = $templateTable . " x='" . $x . "' y='" . $y . "'>";
                $templateTable = $templateTable . "</td>" . PHP_EOL;
            
            $templateTable = $templateTable . "</tr>" . PHP_EOL;
        

        $templateTable = $templateTable . "</table> </td>";

        if ($column == 0) 
            $tallestTemplateHeight = $highestY - $lowestY;
         else if (($highestY - $lowestY) > $tallestTemplateHeight) 
            $tallestTemplateHeight = $highestY - $lowestY;
        

        echo $templateTable;

        $column += $highestX - $lowestX;
        if ($column >= $maxColumns) 
            $row += $tallestTemplateHeight;
            echo "</tr></table><table><tr>";
        
    
    fclose($listHandle);



    ?>  

</div>

PS：我愿意完全放弃我当前的设置。

【参考方案1】：

我会把它作为一个想法扔掉 - FIDDLE

它使用 div 代替表格，通过玩循环、宽度等，您可以根据需要调整它。

一切都完美契合。

JS

var counter = 0;
var numdivs = 8;
$('#clickme').click(function()
  for(var i=1; i < 50; ++i)
  
    $("<div class='standarddiv'>X</div>").appendTo('.holder');
    counter = counter + 1;
   if(counter==numdivs)
   
    $("<div class='clearboth'></div>").appendTo('.holder');
    counter = 0;
    
   
);