無限滾動JQuery/PHP（加載頁面問題）

如何在無限滾動的情況下動態加載頁面。無限滾動JQuery/PHP（加載頁面問題）

問題是我必須手動創建php文件。腳本搜索2.php然後3.php然後4.php等等...我不想手動創建這些頁面，我希望它是自動的？ :)

一些我覺得我必須創建一些類型的循環來獲取新的圖像。目前我的代碼是

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
    <title>Adi</title> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>Adi</title> 

<link rel="stylesheet" type="text/css" href="style.css" /> 


<script src="jquery-1.7.1.min.js"></script> 
<script src="jquery.masonry.min.js"></script> 
<script src="jquery.infinitescroll.min.js"></script> 
<script src="modernizr-transitions.js"></script> 
</head> 

<body> 
<div id="container" class="transitions-enabled infinite-scroll clearfix"> 
<?php 
// Make a MySQL Connection 
mysql_connect("localhost", "ID", "Pass") or die(mysql_error()); 
mysql_select_db("DB") or die(mysql_error()); 

// Retrieve all the data from the "test " table 
$result = mysql_query("SELECT * FROM test limit 10") 
or die(mysql_error()); 

// store the records of the "TABLENAME" table into $row array and loop through 
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 

// Print out the contents of the entry 

//echo "details: ".$row['id']; 
echo '<div class="box">'; 
echo "<img src=\"images/".$row['image']."\" alt=\"name\" />"; 
echo '</div>'; 
} 
?> 
</div> 
<p>Hi</p> 
<p>&nbsp;</p> 

<nav id="page-nav"> 
    <a href="2.php"></a> 
</nav> 

<script > 
    $(function(){ 
    var $container = $('#container'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector: '.box', 
     columnWidth: 60 
     }); 
    }); 

    $container.infinitescroll({ 
     navSelector : '#page-nav', // selector for the paged navigation 
     nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
     itemSelector : '.box',  // selector for all items you'll retrieve 
     loading: { 
      finishedMsg: 'No more pages to load.', 
      img: 'http://i.imgur.com/6RMhx.gif' 
     } 
     }, 
     // trigger Masonry as a callback 
     function(newElements) { 
     // hide new items while they are loading 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to masonry layout 
     $newElems.imagesLoaded(function(){ 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
     }); 
     } 
    ); 

    }); 
</script> 
</body> 
</html>

頁2.PHP

<?php 
    // Make a MySQL Connection 
    mysql_connect("localhost", "ID", "Pass") or die(mysql_error()); 
    mysql_select_db("DB") or die(mysql_error()); 

    // Retrieve all the data from the "test " table 
    $result = mysql_query("SELECT * FROM test limit 5") 
    or die(mysql_error()); 

    // store the records of the "TABLENAME" table into $row array and loop through 
    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 

    // Print out the contents of the entry 

    //echo "details: ".$row['id']; 
    echo '<div class="box">'; 
    echo "<img src=\"images/".$row['image']."\" alt=\"name\" />"; 
    echo '</div>'; 
    } 
    ?>

來源

2012-04-22 Yahoo

您也可以使用URL的GET部分來決定哪些網頁，他們're on .. Append「？page = 3」添加到URL中，在PHP中，您可以使用$ _GET ['page']來訪問該值。 – DanRedux 2012-04-22 05:15:13

@DanRedux - 我不想創建php頁面。有可能在最初的20張圖片之後出現5張圖片... 滾動結束後，再次出現5張圖片。等等... 我不想明白它的頁面明智（因爲我將不得不創建這些頁面，我想這1000個圖片中的初始20是可見的，當滾動到達底部，然後下一個5是顯示，然後再次下一個5等....） – Yahoo 2012-04-22 05:31:21

使一個單一的網頁，其中需要一個參數，像view.php?start=100&end=150，改變你的查詢，以反映：

SELECT * FROM test LIMIT <escaped and sanitized "start">, <difference between "start" and "end">

開始和結束之間的差異也可能是一些值，以反映每個頁面上顯示的元素數量即

然後，您可以使用JQuery來感知頁面底部何時在用戶的視口中可見，並且您可以使用AJAX請求服務器爲您提供下一組圖像。

所以，前進，像這樣：

用戶加載頁面（view.php）。您的腳本將返回頁面的完整HTML，元素0-10或其他東西
用戶滾動到頁面的底部。您的JQuery看到這種情況並說$.post('view.php?ajax=true', { start: end+1, end: end+11 }, someFunctionThatResetsEndToReflectTheNewEndAndUpdateThePage);
您的腳本認爲它是一個AJAX請求（注意：ajax = true）並返回XML或JSON只需要顯示的數據。你也可以做一個單獨的腳本來做到這一點。
你的javascript函數（在一個有上面的很長的名稱）處理數據，它處理到的東西，用戶可以理解

來源

2012-04-22 05:47:08

解決了嗎？我有同樣的問題，沒有人有工作代碼的例子。我的代碼在這裏http://stackoverflow.com/questions/13387383/masonry-infinite-scroll-from-db – Hector 2012-11-16 21:51:07

我發現這一個是非常有用http://codecanyon.net/item/masonry-with-infinite- scroll-and-facebook-connect/3897103如果你看看get_stream.php，你會看到分頁邏輯 – Hector 2013-04-08 21:43:59

無限滾動JQuery/PHP（加載頁面問題）

回答

相關問題