如何显示像Pinterest这样的文本的网格？ [英] How to display a grid with text like Pinterest?

问题描述

我想显示一个带有像Pinterest一样的图像的网格。
我的网站是新闻供稿网站，用户可以上传文本。

用于显示和从数据库获取文本的代码是：

 <？php 
 
 // connect 
 
 mysql_connect（host，username，password）或die（mysql_error（））; 
 mysql_select_db（database_name）或die（mysql_error（））; 
 
 //查询数据库
 $ getnews = mysql_query（SELECT * FROM news ORDER BY id DESC）or die（mysql_query（））; 
 
 while（$ row = mysql_fetch_assoc（$ getnews））
 {
 
 //获取数据
 $ id = $ row ['id'] ; 
 $ title = $ row ['title']; 
 $ body = $ row ['body']; 
 $ date = $ row ['date']; 
 
 echo
  $ title发布在$ date< / b>< br> 
; 
 
 echo nl2br（$ body）; 
 
 echo< hr> 
; 
 
} 
 
 
 
？> 
  

发布文本的代码如下所示：

 <？php 
 
 
 //将类别插入数据库
 if（isset（$ _ POST ['qty']） ））{
 //获取并清理< select>值。 
 //（int）确保该值确实是一个整数。 
 $ qty =（int）$ _ POST ['qty']; 
 
 
 //创建INSERT查询。 
 $ sql =INSERT INTO`table`（`quantity`）
 VALUES（{$ qty}）; 
 
 //连接到数据库并执行查询。 
 $ dbLink = mysql_connect（'host'，'username'，'password'）或die（mysql_error（））; 
 mysql_select_db（'database_name'，$ dbLink）或die（mysql_errno（））; 
 
 $ result = mysql_query（$ sql）; 
 
 //检查结果并打印相应的信息。 
 if（$ result）{
 echoRecord successfully inserted！; 
 
 else {
 echoRecord not inserted！（。mysql_error（）。）; 
 
 
 
 
 
 
 
 $ b if（$ _POST ['post']）
 {
 //获取数据
 $ title = $ _POST ['title']; 
 $ body = $ _POST ['body']; 
 
 //检查是否存在
 if（$ title&& $ body）
 {
 mysql_connect（host，username，password）或死（mysql_error（））; 
 mysql_select_db（database_name）或die（mysql_error（））; 
 
 $ date = date（Y-m-d）; 
 
 //插入数据
 $ insert = mysql_query（INSERT INTO news VALUES（''，'$ title'，'$ body'，'$ date'））或死mysql_error（））; 
 
 die（您的文字已发布！）; 
 
} 
 else 
回声请填写您的姓名和文字< p>; 
} 
？> 
  

解决方案

只需将结果写成< ul>< li> 元素并使用CSS进行设置。不要打扰PHP来创建布局。

之后，您可以使用 jQuery Masonry 插件创建一个类似Pinterest的布局。

您的结果显示代码如下所示：

  echo'< div id =grid>'; 
 while（$ row = mysql_fetch_assoc（$ getnews））
 {
 
 //获取数据
 echo'< div class =item>'; 
 $ id = $ row ['id']; 
 $ title = $ row ['title']; 
 $ body = $ row ['body']; 
 $ date = $ row ['date']; 
 
回显< b> $ title发布在$ 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 src =/ path / to / jquery.masonry.min.js>< / script> 
  

所有项目的大小由您的CSS处理。项目应该是浮动的。

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

最后，在您的页面加载完成后打电话给砌体：

$ b $

  $（function（）{
 $（'＃grid'）。masonry（{
 // options 
 itemSelector：'.item'，
 columnWidth：240 
}）; 
}）
  

;

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

解决方案

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

;

这篇关于如何显示像Pinterest这样的文本的网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！