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.