照片网格使用砖石和 PHP 从数据库中检索照片答案

【问题标题】：photo grid using masonry and PHP to retrieve photo from database照片网格使用砖石和 PHP 从数据库中检索照片
【发布时间】：2018-08-10 05:16:45
【问题描述】：

我是编码新手，我想使用 Masonry 让我的图片像 pinterest 主页一样排列，但我似乎不明白 Masonry 代码是如何工作的。

这是我的图片和代码。

我能够从数据库中检索所有图像，但所有图片都卡在屏幕左侧。我希望页面看起来像这样 2

<?php
// Create database connection
$db = mysqli_connect("localhost", "root", "", "drawingguide");


$sql = "SELECT * FROM images";
$result = mysqli_query($db, "SELECT * FROM images");

?>

<html>
<head>
<style>
.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }
</style>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
</head>
<?php
    while($row = mysqli_fetch_array($result)) {
echo "<div id='container'>";
echo "<img class='item' src='images/{$row['image']} ' />";
echo "</div>";
    }

mysqli_close($db);
?> 

 </html>

【问题讨论】：

欢迎来到 Stack Overflow！您能否详细说明您的代码如何“不起作用”？你期待什么，实际发生了什么？如果您遇到异常/错误，请发布它发生的行和异常/错误详细信息。请edit这些详细信息，否则我们可能无法提供帮助。

标签： php masonry

【解决方案1】：

根据这个 url https://masonry.desandro.com/ 首先你必须制作正确的 HTML 结构，然后是 CSS 和 jQuery。

    <?php
    // Create database connection
    $db = mysqli_connect("localhost", "root", "", "drawingguide");


    $sql = "SELECT * FROM images";
    $result = mysqli_query($db, "SELECT * FROM images");

    ?>

    <html>
    <head>
    <style>
    .grid-item { width: 200px; }
    .grid-item--width2 { width: 400px; }
    </style>
      <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
        <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
    </head>
    <div class='grid'>
<?php
    while($row = mysqli_fetch_array($result)) {
      echo "<div class='grid-item' style='background-image:url(".$row['image'].");background-size:cover'></div>";
    }

mysqli_close($db);
?>
    </div>
      <script type="text/javascript">
      jQuery(document).ready(function(){
          $('.grid').masonry({
            // options
            itemSelector: '.grid-item',
            columnWidth: 200
          });
      });
      </script>
     </html>

【讨论】：

这意味着我需要在我的代码中的某处添加 jquery 吗？因为我的代码中已经有了 CSS 和 HTML。抱歉，这是我第一次编码。
试试我的代码，如果没有，请告诉我
它不起作用，所有图片似乎相互重叠。 imgur.com/a/trXGqNt
图片问题，请尝试加载图片作为背景。我已经更新了我的代码，请检查一下。
我收到此错误“注意：未定义的索引：C:\xampp\htdocs\fyp\testing2.php 中第 26 行的 remoteUrl”，但我使用您以前的代码并设置图像样式宽度:100% 我可以安排图片但是图片太小了。 imgur.com/a/aLeA5HO