0

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

语言：HTML、PHP、CSS

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

如果有更多帮助，请制作绘画图像：http: //postimage.org/image/630pxp3sx/

如果盒子的东西是不可能的，你至少能告诉我如何实现柱子效果。

希望这是有道理的。理想情况下，我想我想用 CSS 来实现这一点？

谢谢

4

2 回答 2

0

使用纯 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 中尝试，没有在演示中添加前缀）

于 2013-01-08T16:28:24.587 回答
0

如果您希望列尽可能均匀，只需事先计算出显示了多少结果。然后，决定要显示多少列。假设您有 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 代码中的浏览器尺寸，因此您可以将给定的高度除以 text-size 并查看一列中可以包含多少项而无需滚动。同样，我已经用这段代码更新了我的页面，所以如果你想要这些完整的片段，只需检查一下。此外，如果您对实施它们有任何疑问，请通过我的网站 (http://mdl.fm) 与我联系，我很乐意提供帮助。

于 2013-01-08T16:31:04.380 回答