用Masonry + Infinite Scroll连接MySQL数据库

编程问答 2022-08-13

问题描述

我更像是Web开发的初学者，对MysqL和PHP经验不足。

我在Masonry上做了一些博客网站，现在想升级它以实现MysqL数据库，这样我就不必再将每个博客文章都硬编码到登录页面中了。

    <!DOCTYPE html>
    <html>

    <head>

    <Meta charset="utf-8">
    <title>PHP TEST</title>
    <link href="css/gridstyle.css" rel="stylesheet" type="text/css">


    </head>

    <body>

    <!-- CONTENT -->
    <div class="grid">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>

    <?PHP

    $conn = MysqLi_connect("x","y","z","database");
    $sql="SELECT * FROM xyz ORDER BY id desc LIMIT 5";

    $result = MysqLi_query($conn,$sql);
    while ($dsatz = MysqLi_fetch_assoc($result)) {
        $rows = array();

        echo "<div class='grid-item'>";
        echo $dsatz['name'];
        echo "</div>";
      }

     ?>

    </div>

    <!-- BUTTON-->
      <p>
      <button class="view-more-button">View more</button>
    </p>

    <!-- END TEXTS -->
    <div class="page-load-status">
      <p class="infinite-scroll-last">End of content</p>
      <p class="infinite-scroll-error">No more pages to load</p>
    </div>

      <script src="js/jquery.min.js" type="text/javascript"></script>
      <script src="js/masonry.pkgd.js" type="text/javascript"></script>
      <script src="js/infinite-scroll.pkgd.min.js"></script>
      <script type="text/javascript">

      var elem = document.querySelector('.grid');
      var msnry = new Masonry( elem,{
      itemSelector: '.grid-item',gutter: '.gutter-sizer',});

    $('.grid').infiniteScroll({
    outlayer: msnry,path: 'content/Page_{{#}}.PHP',append: '.grid-item',scrollThreshold: false,button: '.view-more-button',status: '.page-load-status',history: false,});

  </script>

</body>

</html>

我现在的问题是连接第二页。无限滚动期望追加“ .grid-item”，因此，如果我将PHP代码放在第二页上，则不会发生任何事情。

最后，我希望每个页面显示5个网格项。我会改变

  $sql="SELECT * FROM xyz ORDER BY id desc LIMIT 5";

到

  $sql="SELECT * FROM xyz ORDER BY id desc LIMIT 5,5";

显示接下来的5行。

感谢您的时间！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

blogsinfinite-scrolljquery-masonrymysql