Я хочу показать сетку с текстом, как 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("Ymd"); //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 }); })
;