0

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>";
}
?>
4

1 に答える 1

5

結果を単純な<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>

指定されたアドレスからjQueryMasonryをダウンロードし、次のようにページに含めます。

<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;
}

そして最後に、ページがロードされた後にMasonryに電話します。

$(function(){
  $('#grid').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
})

;

于 2012-06-09T19:40:23.567 に答える