列をできるだけ均等にしたい場合は、事前に表示される結果の数を把握してください。次に、それらを表示する列の数を決定します。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) と空白を追加した理由を知りたい場合は、ソース コードの見栄えを良くするためです。:) 必要に応じて自由に削除してください。ただし、動的に生成されている場合でも、ソース コードが見栄えがよく読みやすいものであることが好きです。
次に、列を画面の幅全体に表示したい場合は、次の<style>ようにヘッダーのタグに PHP を挿入するだけです: )
<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 で割り、スクロールせずに 1 つの列に含めることができるアイテムの数を確認できます。繰り返しますが、このコードでページを更新したので、これらの完全なスニペットが必要な場合はチェックしてください。また、それらの実装について質問がある場合は、私の Web サイト (http://mdl.fm) から連絡してください。喜んでお手伝いします。