Question

我有一个巨大的数据列表，我希望显示10,000个，过滤器希望一次只有几千个。

语言：HTML，PHP，CSS

我在考虑显示这些数据的最佳方式，并想到了我喜欢的想法。我想有一个固定高度的盒子（比如说div）（屏幕/浏览器分辨率的90％或100％）。没有水平滚动。数据将以列的形式显示，填充第一列，然后填充第二列，第三列，第四列等。尽可能多的数据。这些方框将容纳列，并根据需要向下增加数量（用于垂直滚动）。这将需要是动态的，因为我不知道将显示什么数据（基于过滤器），我不会知道用户的浏览器大小等。

制作油漆图片，如果有更多帮助： http://postimage.org/image/630pxp3sx/

如果盒子不可能，你至少可以告诉我如何实现coloumn效果。

希望这是有道理的。理想情况下，我认为我想用CSS实现这个目标吗？

由于

Answer 1

使用纯CSS可以获得的最接近的是columns属性，但它不会完全按照您想要的方式填充。元素将从上到下，从左到右填充，并均分，以便所有列尽可能接近相同的高度。

ul {
  columns: 5em; /* some browsers require prefixes (eg. -moz-columns, etc.) */
}

http://jsfiddle.net/VQXH3/

Flexbox可以满足你的要求，但目前对它的支持很差（IE10 +，Opera，Chrome; Firefox很快就会增加对新规范的支持）。

http://jsfiddle.net/VQXH3/1/（在Opera中尝试，没有为演示添加前缀）

Answer 2

如果您希望列尽可能均匀，只需弄清楚预先显示的结果数量。然后，确定要显示多少列。假设您有100个结果，并希望将它们分为5列，即每列20个结果。你可以在PHP / MySQL中做这样的事情：

<?php
$con = mysql_connect('localhost', 'user', 'pass');
$db = mysql_select_db('data');

$get = mysql_query("SELECT * FROM table");

$columns = 5; // number of columns you want to have
$total = mysql_num_rows($get);
$perCol = ceil($total/$columns);
$counter = 0; // start counter at 0 and increment it as the loop progresses
$data = "<div class=\"column\">\n"; // create blank string for storing results
$counterTotal = 0; // keep track of total results

while($a = mysql_fetch_array($get)) {
    $counter++;
    $counterTotal++;
    if ($counter == 1 ) { // no <br /> tag necessary
        $data .= "   " . $a['data'];
    } else {
        if ( $perCol == $counter ) {
            $data .= "<br />\n   " . $a['data'] . "\n</div>\n<div class=\"column\">\n";
            $counter = 0; // reset counter for new column
        } else {
            $data .= "<br />\n   " . $a['data'];
        }
    }    
}

$data .= "\n</div>\n";

echo $data;

mysql_close($con);
?>

如果您想知道为什么我在代码中添加了所有新行（\ n）和空格，那只是为了让源代码看起来漂亮而漂亮。 :)如果你愿意，可以随意拿出来，但我喜欢我的源代码看起来很好看和可读，即使它是动态生成的。

然后，如果您希望列填充屏幕的整个宽度，您可以将PHP注入标题中的<style>标记，如下所示:(假设它与上面的代码在同一页面上，所以你仍然可以访问$ columns变量）

<style type="text/css">
.column {
    float: left;
    width: <?= floor(100/$columns); ?>%;
    margin: 0px;
    padding: 0px;
}
</style>

当然，只有在分区中没有剩余部分时才会有效，但即使它不是一个完美的分区，它也应该接近。以下是我为此做的示例页面中的代码：

<?php
$con = @mysql_connect("localhost", "user", "pass");
$db = @mysql_select_db("sampleDB", $con);

$get = mysql_query("SELECT * FROM dataTable");

$columns = 5; // number of columns you want to have
$total = mysql_num_rows($get);
$perCol = ceil($total/$columns);
$counter = 0; // start counter at 0 and increment it as the loop progresses
$data = "<div class=\"column\">\n"; // create blank string for storing results
$counterTotal = 0; // keep track of total results

while($a = mysql_fetch_array($get)) {
    $counter++;
    $counterTotal++;
    if ($counter == 1 ) { // no <br /> tag necessary
        $data .= "   " . $a['data'];
    } else {
        if ( $perCol == $counter ) {
            $data .= "<br />\n   " . $a['data'] . "\n</div>\n<div class=\"column\">\n";
            $counter = 0; // reset counter for new column
        } else {
            $data .= "<br />\n   " . $a['data'];
        }
    }
}

$data .= "\n</div>\n";

@mysql_close($con);
?>
<html>
    <head>
        <title>Data In Columns</title>
        <style type="text/css">
        .column {
            float: left;
            width: <?= floor(100/$columns); ?>%;
            margin: 0px;
            padding: 0px;
        }
        </style>
    </head>
    <body>
       <?= $data; ?>
    </body>
</html>

如果您想查看此代码的结果，可以查看我在此处制作的示例：http://mdl.fm/sample.php

更新：如果您希望将内容调整到屏幕高度并确定所需的列数，则需要手动指定每列中有多少项，因此您需要进行以下替换：

// replace this
$perCol = ceil($total/$columns);
// with this
$perCol = 20;
$columns = ceil($total/$perCol); 
// the line above will just override the manual declaration of $columns

但是，PHP无法检测浏览器的维度，因此如果您想这样做，可以通过包含维度的Javascript再次转发到PHP页面。以下是您可以使用的一段示例代码，将其放在您网页的标记中：

<script type="text/javascript">
function getDims() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }

  return {
    'width' : myWidth,
    'height' : myHeight
  };
}

function loadDims() {
   if ( document.URL.indexOf("?w=") < 0 ) {
      var dims = getDims();
      window.location.href = '/sample.php?w=' + dims.width + '&h=' + dims.height;
   }
}
</script>

然后使用这样的onload更新您的：

<body onload="loadDims();">

此时，您将了解PHP代码中的浏览器尺寸，因此您可以将给定高度除以文本大小，并查看一列中可以包含多少项而无需滚动。同样，我已使用此代码更新了我的页面，所以如果您需要这些完整的代码段，请查看它。此外，如果您有任何实施问题，请通过我的网站（http://mdl.fm）与我联系，我很乐意提供帮助。

PHP CSS HTML。大量数据，动态列和框

2 个答案: