用jQuery砌體「加載更多文章」

我已經爲自定義頁面模板（Wordpress）實現了砌體。我規定只顯示前10個職位。但是，我想創建一個「加載更多」鏈接，以便顯示接下來的10個帖子，依此類推，直到砌體到達最後一個帖子。用jQuery砌體「加載更多文章」

我不太瞭解append方法，以及如何正確使用它的語法。例如，如果容器是#newsContainer，並且每個圖塊都是.newsContainerPost，我將如何正確地將它放入（下面）？

$('#append').click(function(){ 
    var $boxes = $(boxMaker.makeBoxes()); 
    $container.append($boxes).masonry('appended', $boxes); 
});

來源

2013-02-22 user2097814

您需要採取幾個步驟才能做到這一點。首先，您需要使用AJAX來調用您的數據庫並獲取項目（本例中爲posts）。你很可能想要返回一個可以解析的JSON字符串來爲帖子構建你的HTML標記。一個例子是：

$.ajax({ 
    type: "POST", 
    url: "path/to/load-more.php", 
     context: document.body, 
     success: function(data) { 
      if(!data){ 
       //possible errors 
       return false; 
      } 
      var posts = JSON.parse(data); 
      var container = document.getElementById('container') 
      for(var i in posts){ 
       var post = posts[i]; 
       //now post will have info like post.image, post.title 
       //post.excerpt, and whatever else you put in the php script 
       //build the post with HTML and append it to the container 
       //and [reload masonry][2] eaxmple 
       var div = document.createNode('div'); 
       var h1 = document.createNode('h1'); 
       h1.innerHTML = post.title; 
       div.appendChild(h1); 
       container.appendChild(div); 
       container.masonry('reload');     
      } 
     } 
    });

其次你需要你的load-more.php作爲JSON字符串返回你的10個職位。您將需要run the WP loop outside of the engine。

<?php 
    // Include WordPress 
    define('WP_USE_THEMES', false); 
    require('/server/path/to/your/wordpress/site/htdocs/blog/wp-blog-header.php'); 
    query_posts('showposts=10'); 
    $arr = new array(); 
while ($wp_query->have_posts()) : $wp_query->the_post(); 
    //put in whatever info you want from the post in a new 
    //array index 
    $arr[the_ID()]['title'] = the_title(); 
endwhile; 

return json_encode(arr); 

?>

將ajax調用放入函數中，並在要加載的事件上調用該函數;比如點擊一個按鈕，或者滾動到頁面底部。

我希望這會有所幫助。

來源

2013-02-27 00:52:59

用jQuery砌體「加載更多文章」

回答

相關問題