使用Isotope和InfiniteScroll进行MySQL查询

时间:2016-02-23 10:45:36

标签: php mysql mysqli

我目前正在编写一个投资组合/博客风格的网站; Metafizzy的MySQLPHPIsotope创造了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>

2 个答案:

答案 0 :(得分:0)

首先,我想你知道你的工作。 因为你的问题中没有代码,我只会给你一个想法。 你必须完成它。

在第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列表。然后,您将在查询中添加一个关闭位置,以选择与您在第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';

答案 1 :(得分:0)

尝试纯mysql:

SELECT * FROM 
(
    SELECT * FROM blog LIMIT 1, 9
) result
ORDER BY rand()

注意:限制工作的第一个参数,如偏移量