个人中心
gpt4 book ai didi

php - 使用 Isotope 和 InfiniteScroll 进行 MySQL 查询

转载 作者：行者123 更新时间：2023-11-30 22:24:50 25 4
gpt4 key购买 nike

我目前正在编写一个投资组合/博客风格的网站，使用； MySQL、PHP 和 Isotope，由 Metafizzy 创建 Pintrest 风格。

一旦滚动位置到达包含内容的 div 底部，就会调用 InfiniteScroll.js，然后它会导入一个 'page2.php'在下面，它包含另一个 MySQLi 查询来显示下一组数据。所有信息都从中央表格中获取。表格中的信息无法正确排序，因为我们希望每次刷新时显示的数据都是随机的。

我目前正在使用以下语句； 'SELECT * FROM table ORDER BY RAND() LIMIT 9'，然后在第二页使用 'SELECT * FROM table ORDER BY RAND() LIMIT 9 OFFSET 9' 然后此后的每一页上将 OFFSET 增加 9。

这是从数据库中给我重复的结果，我认为这是由 'RAND()' 引起的。当查询在技术上位于不同的页面上时，有没有办法让结果不重复多次，同时仍然是随机的？

以下是我的索引页面中的代码。我知道 MySQL 已过时，我只是将其用作概念证明。

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>TonyG Ltd</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="css/grid.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>


  <?php include 'db/db.php'; $query='SELECT * FROM blog ORDER BY RAND() LIMIT 9' ; $result=m ysql_query($query) or die($myQuery. "<br/><br/>".mysql_error()); $rows=m ysql_num_rows($result); ?>
</head>

<body>

  <div class="container-fluid">

    <div class="row nav">
      <div class="button-group filters-button-group">

        <div class="col-xs-5 nav-left"><a class="nav-link" data-filter=".folder-open">PROJECTS</a> &nbsp; &nbsp; <a class="nav-link" data-filter=".desktop">SERVICES</a> &nbsp; &nbsp; <a class="nav-link" href="blog.php">BLOG</a>
        </div>

        <a data-filter="*">
          <div class="col-xs-2"><span class="nav-logo center-block"></span>
          </div>
        </a>

        <div class="col-xs-5 nav-right"><a class="nav-link" data-filter=".user">PEOPLE</a> &nbsp; &nbsp; <a class="nav-link" data-filter=".briefcase">CLIENTS</a> &nbsp; &nbsp; <a class="nav-link" href="http://192.168.2.30/~ryanelliott/tonyg/contact">CONTACT</a>
        </div>

      </div>
    </div>

    <div class="row">
      <div class="heading">
        <h2>TAGLINE</h2>
      </div>
    </div>


    <div id="container" class="container variable-sizes clearfix infinite-scrolling">
      <div class="grid">
        <div class="grid-sizer"></div>
        <div class="gutter-sizer"></div>
        <?php while ($row=m ysql_fetch_array($result)) { if ($row[ 'homepage-desc'] !='NULL' ) { echo '<div class="grid-item '.$row[ 'icon']. ' '.$row[ 'icon']. ' grid-item--'. $row[ 'card'] . '" data-category="'.$row[ 'icon']. '"> 
                        <div>
                            <a href="'.$row[ 'type']. '.php?id='. $row[ 'home_id'] . '"><div class="image"><img src="'. $row[ 'image-1'] . '" alt=""></div></a>
                            <a href="'.$row[ 'type']. '.php?id='. $row[ 'home_id'] . '"><h5 class="hold">'. $row[ 'title'] . '<i class="icon fa fa-'. $row[ 'icon'] . '"></i></h5></a>
                            <p class="light">'. $row[ 'homepage-desc'] . '</p>
                        </div>
                    </div>'; } else { echo '<div class="grid-item '.$row[ 'icon']. ' grid-item--'. $row[ 'card'] . '" data-category="'.$row[ 'icon']. '"> 
                            <div>
                                <a href="'.$row[ 'type']. '.php?id='. $row[ 'home_id'] . '"><div class="image"><img src="'. $row[ 'image-1'] . '" alt=""></div></a>
                                <a href="'.$row[ 'type']. '.php?id='. $row[ 'home_id'] . '"><h5 class="holdfalse">'. $row[ 'title'] . '<i class="icon fa fa-'. $row[ 'icon'] . '"></i></h5></a>
                            </div>
                        </div>'; } } ?>

      </div>

      <nav id="page_nav">
        <a href="autoload/page2.php"></a>
    </div>

  </div>

  <footer>

    <div class="container">
      <div class="row">
        <div class="col-xs-6 text-left">
          <p>TonyG Ltd. Registered in ... Number ...</p>
        </div>
        <div class="col-xs-6 text-right right-fix">
          <p>studio@tonyg.co.uk | +44(0) 870 121 7676</p>
        </div>
      </div>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/infinite-scroll-master/jquery.infinitescroll.min.js"></script>

    <script>
      $(function() {
        // init Isotope
        var $grid = $('.grid').isotope({
          itemSelector: '.grid-item',
          layoutMode: 'fitRows'
        });
        var $container = $('#container');
        $container.isotope({
          itemSelector: '.grid-item',
          percentPosition: true,
          masonry: {
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer'
          }
        });

        $container.infinitescroll({
            navSelector: '#page_nav', // selector for the paged navigation 
            nextSelector: '#page_nav a', // selector for the NEXT link (to page 2)
            itemSelector: '.grid-item', // selector for all items you'll retrieve
            loading: {
              finishedMsg: 'No more pages to load.',
              img: 'http://i.imgur.com/qkKy8.gif'
            }
          },
          // call Isotope as a callback
          function(newElements) {
            $container.isotope('appended', $(newElements));
          }
        );
      });
    </script>

  </footer>

  </div>

</body>

</html>

以下是导入页面的代码，它在滚动时添加了额外的内容。

<?php include '../db/db.php'; $query='SELECT * FROM blog ORDER BY RAND() LIMIT 9' ; $result=m ysql_query($query) or die($myQuery. "<br/><br/>".mysql_error()); $rows=m ysql_num_rows($result); ?>
<div class="container scroll" data-ui="jscroll-default">
  <div class="grid jscroll-inner">
    <div class="grid-sizer col-sm-6"></div>
    <div class="gutter-sizer"></div>
    <?php while ($row=m ysql_fetch_array($result)) { if ($row[ 'homepage-desc'] !='NULL' ) { echo '<div class="grid-item '.$row[ 'icon']. ' '.$row[ 'icon']. ' grid-item--'. $row[ 'card'] . '" data-category="'.$row[ 'icon']. '"> 
                        <div>
                            <a href="'.$row[ 'type']. '.php?id='. $row[ 'home_id'] . '"><div class="image"><img src="'. $row[ 'image-1'] . '" alt=""></div></a>
                            <a href="'.$row[ 'type']. '.php?id='. $row[ 'home_id'] . '"><h5 class="hold">'. $row[ 'title'] . '<i class="icon fa fa-'. $row[ 'icon'] . '"></i></h5></a>
                            <p class="light">'. $row[ 'homepage-desc'] . '</p>
                        </div>
                    </div>'; } else { echo '<div class="grid-item '.$row[ 'icon']. ' grid-item--'. $row[ 'card'] . '" data-category="'.$row[ 'icon']. '"> 
                            <div>
                                <a href="'.$row[ 'type']. '.php?id='. $row[ 'home_id'] . '"><div class="image"><img src="'. $row[ 'image-1'] . '" alt=""></div></a>
                                <a href="'.$row[ 'type']. '.php?id='. $row[ 'home_id'] . '"><h5 class="holdfalse">'. $row[ 'title'] . '<i class="icon fa fa-'. $row[ 'icon'] . '"></i></h5></a>
                            </div>
                        </div>'; } } ?>

  </div>

  <div class="next jscroll-next-parent">
    <a href="autoload/page3.php">next</a>
  </div>

</div>

最佳答案

首先，我想您了解自己的工作。因为你的问题中没有代码，所以我只是给你一个想法。您必须完成它。

在第 1 页中，您会将第一个结果集中的 ID 存储在一个数组中，并将该数组存储在 $_SESSION 中。

page1.php

session_start();

//Make your query : SELECT * FROM table ORDER BY RAND() LIMIT 9
//Suppose results are stored in an array called "$listResult".

$listIDs = array();

foreach($listResult as $result)
{
    $listIDs[] = $result['idFromTable'];
}

$_SESSION['listIDs'] = $listIDs;

//Continue your stuff

第 2 页，您将从 $_SESSION 中检索 ID 列表。然后，您将在查询中添加 where close 以选择与您在第 1 页中存储的 ID 列表不匹配的随机结果。

page2.php

session_start();

$strListIDs = implode(',', $_SESSION['listIDs']);

$query = 'SELECT * FROM table WHERE id NOT IN ('.$strListIDs.') ORDER BY RAND() LIMIT 9 OFFSET 9';

关于php - 使用 Isotope 和 InfiniteScroll 进行 MySQL 查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35575346/

25 4 0
文章推荐： php - 将 XLSX 文件导入 MySQL 数据库
文章推荐： MySQL 不为唯一约束删除索引
文章推荐： php - SQL查询要剔除多个表中的相同数据
文章推荐： c# - 如果系统日期错误，我如何获得正确的日期
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com