Mosaicflow ajouter la liste avec de nouveaux éléments avec ajax

Question

J'utilise mosaicflow pour lister mes articles, mais il y en a beaucoup, donc je veux afficher seulement le premier 20 élément et après un clic sur le bouton afficher les 20 suivants sous les 20 premiers etc.

Pour cela, j'utiliser un ajax appeler son travail parfaitement, il montre les 20 prochains articles, mais ensuite les sauts de disposition de mosaicflow ...

Quelqu'un at-il une idée comment je peux résoudre ce problème?

J'ai essayé d'utiliser le mosaicflow ajouter événement, mais il ajoute les 20 articles à la plus petite colonne ...

J'ai aussi essayé d'ajouter les données au conteneur mosaicflow mais cela n'a pas été bon ni ...

le html ressemble à ceci (2 colonnes):

<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> 

Dans le ajax succès i ajouter les données que je reçois du script:

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

Je reçois les données via ajax à partir du script php dans ce format:

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

mise à jour, voici le code HTML complet et le code 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> 

Ajax (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

Mise à jour jQuery ajax appel

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