How to display a grid with text like Pinterest?

Question

I want to display a grid with text like Pinterest does with images. My site is a news feed site were users can upload texts.

The code for displaying and getting the text from the database is:

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

}



?>

And the code for posting a text is like:

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

Answer 1

Just write your result as simple <ul><li> elements and style it with CSS. Don't bother with PHP to create a layout.

After that you can use the jQuery Masonry plugin to create a Pinterest like layout.

Your "result display" code will be like this:

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

After that change your final HTML will look like this:

<div id="grid">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

Download jQuery Masonry from the given address and include it in your page like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/path/to/jquery.masonry.min.js"></script>

All sizing of items is handled by your CSS. Items should be floated.

.item {
  width: 220px;
  margin: 10px;
  float: left;
}

And at last, call Masonry after your page is loaded:

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

;