馬賽克追加列表與新項目與阿賈克斯

Question

我使用馬賽克列出我的項目，但有很多他們，所以我想只顯示前20項目，並在按鈕點擊後顯示下20前20等等。

爲此，我使用AJAX調用它的完美的工作，所以它顯示，未來20個項目，但隨後mosaicflow佈局休息...

有沒有人一個想法如何，我可以解決這個問題呢？

我試圖用mosaicflow添加事件，但隨後將其添加在接下來的20項到最小列...

我也試圖將數據追加到mosaicflow容器但這並非沒有好...

的HTML看起來像這樣（2列）：

<div class="mosaicflow"> 
     <div class="mosaicflow__column"> 
      <div class="mosaicflow__item"> 
       // item details 
      </div> 
      <div class="mosaicflow__item"> 
       // item details 
      </div> 
      // more mosaicflow__item divs 
     </div> 
     <div class="mosaicflow__column"> 
      <div class="mosaicflow__item"> 
       // item details 
      </div> 
      <div class="mosaicflow__item"> 
       // item details 
      </div> 
      // more mosaicflow__item divs 
     </div> 
    </div> 

在阿賈克斯成功，我附上我從腳本獲取數據：

$(document).on('click', '#btn', function(){ 
    //... 
    success:function(data) { 
    $('.mosaicflow').append(data); 
    } 
}); 

我通過Ajax從這種格式的PHP腳本獲得數據：

<div class="mosaicflow__item"> 
    // item details 
</div> 

更新，以下是完整的HTML和Ajax代碼：

<?php 
include_once('connection.php'); 
$categoryName = 'Category'; 
$query = $pdo->prepare("SELECT * FROM items WHERE cat_name = '$categoryName' ORDER BY id DESC LIMIT 20"); 

$query->execute(); 
$items = $query->fetchAll(); 
$item_id = ''; 
if($query->rowCount() > 0) {; ?> 
    <div class="mosaicflow myContainer">     
    <?php 
    foreach($items as $item) { ?> 
      <div class="mosaicflow__item"> 
       <h3><?php echo $item['name'] ?></h3> 
       <p><?php echo summary($item['text']); ?></p> 
       <div class="ButtonHolder"> 
        <a href="link.html" class="button" style="vertical-align:middle;"><span>Link </span></a> 
       </div> 
      </div> 
    <?php 
     $item_id = $item['id']; 
    } ?> 
    <button name="btn_more" id="btn_more" data-item="<?php echo $item_id; ?>" class="btn btn-success form-control" >more</button> 
<?php 
} 
else { 
    echo "<p>There are no items!</p>"; 
} 
?> 
</section> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script src="js/jquery.mosaicflow.js"></script> 
<script> 
    $(document).ready(function(){ 
     $(document).on('click', '#btn_more', function(){ 
      var last_item_id = $(this).data("item"); 
      $('#btn-more').html("loading..."); 
      $.ajax({ 
       url: "load_items.php", 
       type: "POST", 
       data: {last_item_id:last_item_id,categoryname:"<?php echo $categoryName; ?>"}, 
       dataType: "text", 
       success:function(data) 
       { 
        if (data != '') { 
         $('#btn_more').remove(); 

         // Init mosaicflow 
         var container = $('.myContainer').mosaicflow(); 

         // Create new html node and append to smallest column 
         var elm = $(data); 
         container.mosaicflow('add', elm); 
         //$('.mosaicflow').append(data); 
        } 
        else { 
         $('#btn_more').html("No Data"); 
        } 
       } 
      }); 
     }); 
    }); 
</script> 

阿賈克斯（load_items.php）：

<?php 
include_once('connection.php'); 
$output = ''; 
$item_id = ''; 
$lastItemId = $_POST['last_item_id']; 
$categoryName = $_POST['categoryname']; 
$query = $pdo->prepare("SELECT * FROM items WHERE cat_name = '$categoryName' AND id < $lastItemId ORDER BY id DESC LIMIT 20"); 
$query->execute(); 
$items = $query->fetchAll(); 
$items_num = $query->rowCount(); 
if($items_num > 0) { 
    foreach ($items as $item) { 
     $item_id = $item['id']; 
     $output .= '<div class="mosaicflow__item">'; 
     $output .= '<h3>' . $item['name'] . '</h3>'; 
     $output .= '<p>' . $item['text'] . '</p>'; 
     $output .= '<div class="ButtonHolder">'; 
     $output .= '<a href="link.html" class="button" style="vertical-align:middle;"><span>Link </span></a>'; 
     $output .= '</div>'; 
     $output .= '</div>'; 
    } 
    $output .= '<button name="btn_more" id="btn_more" data-item="' . $item_id . '" class="btn btn-success form-control" >more</button>'; 
    echo $output; 
} 
?> 

Answer 1

更新jQuery的AJAX調用

$(document).on('click', '#btn', function(){ 
 
    //... 
 
    success:function(data) { 
 
    data = $('<div />').append(data).find('.mosaicflow__item').html(); 
 
    $('.mosaicflow .mosaicflow__item').append(data); 
 
    } 
 
});