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

Question

我有一个用户贡献内容的网站。内容采用表格形式，其中每个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：我愿意完全放弃我目前的设置。

Answer 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;
    }
   }
});