Verwenden von ListJS mit Mauerwerk

Question

Ich mache ein Projekt, wo ich Listjs und Mauerwerk zusammen benutze. Ich wollte es, als ich paginierte und nach etwas suchte, das das Mauerwerk neu arrangierte. Dies geschieht jedoch nicht. Ich lasse hier meinen Code:

HTML CODE

<div class="container" id="posts"> 
    <div class="row"> 
      <div class="col-md-8"> 
       <div class="grid list"> 
        <div class="grid-sizer"></div> 
        <div class="grid-item"><div class='tag'>sports, fails</div><img src='assets/images/posts/1.gif'></div> 
        <div class="grid-item"><div class='tag'>sports, football</div><img src='assets/images/posts/2.gif'></div> 
        <div class="grid-item"><div class='tag'>sports, tenis</div><img src='assets/images/posts/1.gif'></div> 
        <div class="grid-item"><div class='tag'>sports</div><img src='assets/images/posts/3.gif'></div> 
        <div class="grid-item"><div class='tag'>fail</div><img src='assets/images/posts/1.gif'></div> 
        <div class="grid-item"><div class='tag'>kid</div><img src='assets/images/posts/3.gif'></div> 
        <div class="grid-item"><div class='tag'>teste</div><img src='assets/images/posts/1.gif'></div> 
        <div class="grid-item"><div class='tag'>tete</div><img src='assets/images/posts/5.gif'></div> 
        <div class="grid-item"><div class='tag'>1235</div><img src='assets/images/posts/1.gif'></div> 
        <div class="grid-item"><div class='tag'>1235</div><img src='assets/images/posts/1.gif'></div> 
        <div class="grid-item"><div class='tag'>1235</div><img src='assets/images/posts/3.gif'></div> 
        <div class="grid-item"><div class='tag'>1235</div><img src='assets/images/posts/2.gif'></div> 
        <div class="grid-item"><div class='tag'>1235</div><img src='assets/images/posts/5.gif'></div> 
       </div> 
       <div class="col-md-12"> 
        <div class="pagination-box"> 
         <ul class="pagination"></ul> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 
       <div class="search-bar"> 
        <input type='text' class='form-control search' placeholder="Search..."> 
       </div> 
      </div> 
    </div> 
    <!-- /.row --> 
</div> 

JavaScript-Code

<script> 
// init Masonry 
var $grid = $('.grid'); 
$grid.masonry({ 
    itemSelector: '.grid-item', 
    percentPosition: true, 
    columnWidth: '.grid-sizer', 
    gutter: 20, 
    stagger: 30 
}); 
// layout Isotope after each image loads 
$grid.imagesLoaded().progress(function() { 
    $grid.masonry(); 
}); 
</script> 
<script> 
var options = { 
    valueNames: [ 'tag' ], 
    page: 10, 
    plugins: [ 
     ListPagination({}) 
    ] 
}; 
var postslist = new List('posts', options); 
postslist.on('searchStart', function(){ 
    $grid.masonry('reloadItems'); 
}); 

</script> 

Answer 1

Nach einigen Stunden des Testens und Debugging, ich war in der Lage, eine Lösung für mein Problem zu finden. Ich musste das Mauerwerk bei der Suche und in der Paginierung erneut initialisieren. Jedoch habe ich einen weiteren Fehler gefunden, als ich die Seitenumbruch für div gemacht habe. Die Lösung, die ich fand, bestand darin, das div anzufügen, wenn ich die Seiten wechselte.

AKTUALISIERT JavaScript-Code

<script> 
// init Masonry 
var $grid = $('.grid'); 
$grid.masonry({ 
    itemSelector: '.grid-item', 
    percentPosition: true, 
    columnWidth: '.grid-sizer', 
    gutter: 20, 
    stagger: 30 
}); 
// layout Isotope after each image loads 
$grid.imagesLoaded().progress(function() { 
    $grid.masonry(); 
}); 
var options = { 
    valueNames: [ 'tag' ], 
    page: 10, 
    pagination: true 
    /*plugins: [ 
     ListPagination({}) 
    ]*/ 
}; 
var postslist = new List('posts', options); 
$('.search').on('input',function(){ 
    $grid.masonry('destroy'); 
    $grid.masonry({ 
     itemSelector: '.grid-item', 
     percentPosition: true, 
     columnWidth: '.grid-sizer', 
     gutter: 20, 
     stagger: 30 
    }); 
}); 
postslist.on('updated', function(){ 
    $(".grid").append('<div class="grid-sizer"></div>'); 
    $grid.masonry('destroy'); 
    $grid.masonry({ 
     itemSelector: '.grid-item', 
     percentPosition: true, 
     columnWidth: '.grid-sizer', 
     gutter: 20, 
     stagger: 30 
    }); 
}); 
</script> 

Ich hoffe, dass ich jemand helfen kann, wenn es notwendig ist,

Dank