PHP CSS HTML。 大量数据，动态列和框
[英]PHP CSS HTML. Huge amount of data, dynamic columns and boxes
问题描述
我有一个要显示的庞大数据列表，其中包含10,000个，并且一次只能过滤几千个过滤器。
语言：HTML，PHP，CSS
我在考虑显示这些数据的最佳方法，并想到了自己喜欢的想法。 我想要一个具有固定高度（屏幕/浏览器分辨率的90％或100％）的框（例如div）。 没有水平滚动。 数据将以可视方式显示在列中，并根据需要填充第一列，然后填充第二，第三，第四等。 这些框将容纳列，并根据需要向下增加数量（用于垂直滚动）。 这将是动态的，因为我将不知道将显示哪些数据（基于过滤器），也不知道用户的浏览器大小等。
制作绘画图像是否有帮助（更多）： http : //postimage.org/image/630pxp3sx/
如果盒子里的东西不可能，您至少可以告诉我如何实现对话效果。
希望有道理。 理想情况下，我想我想使用CSS实现此目标？
谢谢
2 个解决方案
解决方案1
0 2013-01-08 16:28:24
使用纯CSS可以得到的最接近的是columns属性，但是它并不能完全满足您的需要。 元素将从上至下，从左至右填充，并等分分布，以使所有列都尽可能接近相同的高度。
ul {
columns: 5em; /* some browsers require prefixes (eg. -moz-columns, etc.) */
}
Flexbox可以满足您的要求，但目前对此功能的支持不佳（IE10 +，Opera，Chrome； Firefox即将添加对新规范的支持）。
http://jsfiddle.net/VQXH3/1/ （在Opera中尝试，未在演示中添加前缀）
解决方案2
0 2013-01-08 16:31:04
如果要使列尽可能均匀，只需简单地预先计算要显示多少个结果。 然后，决定要显示多少列。 假设您有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>
然后更新 像这样的加载：
<body onload="loadDims();">
此时，您将知道PHP代码中的浏览器尺寸，因此您可以将给定的高度除以text-size，并查看一列中可以包含多少项而无需滚动。 同样，我已经使用此代码更新了我的页面，因此，如果您需要这些完整的代码片段，请直接进行检查。 另外，如果您在实施这些问题时有任何疑问，请通过我的网站（http://mdl.fm）与我联系，我们将很乐意为您提供帮助。
混合使用PHP和html。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.