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

我有一个网站，在那里用户贡献内容。内容采用表格的形式，其中每个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>

---

附言：我愿意完全放弃我目前的设置

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

它使用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;
    }
   }
});