我想像Pinterest对图像一样显示一个带有文本的网格。我的网站是一个新闻提要网站，用户可以上传文本。
用于显示和从数据库中获取文本的代码是：
<?php
//connect
mysql_connect("host","username","password") or die(mysql_error());
mysql_select_db("database_name") or die(mysql_error());
//query the database
$getnews = mysql_query("SELECT * FROM news ORDER BY id DESC") or die(mysql_query());
while ($row = mysql_fetch_assoc($getnews))
{
//get data
$id = $row['id'];
$title = $row['title'];
$body = $row['body'];
$date = $row['date'];
echo "
<b>$title posted on $date</b><br>
";
echo nl2br($body);
echo "<hr>
";
}
?>
发布文本的代码是这样的：
<?php
//insert category to database
if(isset($_POST['qty'])) {
// Fetch and clean the <select> value.
// The (int) makes sure the value is really a integer.
$qty = (int)$_POST['qty'];
// Create the INSERT query.
$sql = "INSERT INTO `table`(`quantity`)
VALUES ({$qty})";
// Connect to a database and execute the query.
$dbLink = mysql_connect('host', 'username', 'password') or die(mysql_error());
mysql_select_db('database_name', $dbLink) or die(mysql_errno());
$result = mysql_query($sql);
// Check the results and print the appropriate message.
if($result) {
echo "Record successfully inserted!";
}
else {
echo "Record not inserted! (". mysql_error() .")";
}
}
if ($_POST['post'])
{
//get data
$title = $_POST['title'];
$body = $_POST['body'];
//check for existance
if ($title&&$body)
{
mysql_connect("host","username","password") or die(mysql_error());
mysql_select_db("database_name") or die(mysql_error());
$date = date("Y-m-d");
//insert data
$insert = mysql_query("INSERT INTO news VALUES ('','$title','$body','$date')") or die(mysql_error());
die("Your text has been posted!");
}
else
echo "Please fill out your name and text<p>";
}
?>
只需将结果编写为简单的<ul><li>元素，并使用CSS设置其样式即可。不要费心用PHP来创建布局。
之后，您可以使用jQuery Masonry插件来创建类似Pinterest的布局。
您的"结果显示"代码将如下所示：
echo '<div id="grid">';
while ($row = mysql_fetch_assoc($getnews))
{
//get data
echo '<div class="item">';
$id = $row['id'];
$title = $row['title'];
$body = $row['body'];
$date = $row['date'];
echo "<b>$title posted on $date</b>";
echo nl2br($body);
echo "</div>";
}
echo "</div>";
更改后，最终的 HTML 将如下所示：
<div id="grid">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
从给定地址下载jQuery Masonry并将其包含在您的页面中，如下所示：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/path/to/jquery.masonry.min.js"></script>
项目的所有大小调整都由您的 CSS 处理。项目应浮动。
.item {
width: 220px;
margin: 10px;
float: left;
}
最后，在页面加载后致电共济会：
$(function(){
$('#grid').masonry({
// options
itemSelector : '.item',
columnWidth : 240
});
})
;