조적과 함께 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> 

자바 스크립트 코드

<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를 추가하는 것이었다.

업데이트] 자바 스크립트 코드

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

나는 그것이