將ListJS與石工結合使用

Question

我正在做一個同時使用Listjs和Masonry的項目。 當我翻頁並搜索砌體重新布置的物品時，我想要它。 但是，這沒有發生。 我在這里留下我的代碼：

HTML代碼

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

<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

經過幾個小時的測試和調試，我能夠找到解決問題的方法。 我必須在搜索和分頁中再次初始化砌體。 但是我在對div進行分頁時發現了另一個錯誤。 我發現的解決方案是每當我更改頁面時都添加div。

更新的JAVASCRIPT代碼

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

希望有需要的時候我可以幫助別人

謝謝