Javascript 将ListJS与砌体一起使用

我正在做一个项目，在这个项目中，我将Listjs和Mashine结合使用。当我寻呼和搜索一些东西时，我想要它。砖石厂重新排列了这些项目。然而，这并没有发生。我把代码留在这里：

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>

体育，失败
体育、足球
体育，泰尼斯
体育
失败
小孩
睾丸
太特
1235
1235
1235
1235
1235

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>

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

//初始砌体
var$grid=$（'.grid'）；
$grid.mashine({
itemSelector:“.grid项”，
位置：正确，
columnWidth:“.grid sizer”，
排水沟：20，
错距：30
});
//加载每个图像后的布局
$grid.imagesLoaded（）.progress（函数（））{
$grid.mashine（）；
});
变量选项={
ValueName:['标记']，
页码：10，
插件：[
列表分页（{}）
]
};
var postslist=新列表（'posts'，选项）；
postslist.on（'searchStart'，function（））{
$grid.圬工（‘重新加载的项目’）；
});

经过几个小时的测试和调试，我找到了问题的解决方案。我必须在搜索和分页中再次初始化砖石结构。然而，我发现另一个错误，当对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();
});
</script>
<script>
var options = {
    valueNames: [ 'tag' ],
    page: 10,
    plugins: [
      ListPagination({})
    ]
};
var postslist = new List('posts', options);
postslist.on('searchStart', function(){
    $grid.masonry('reloadItems');
});

</script>

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

//初始砌体
var$grid=$（'.grid'）；
$grid.mashine({
itemSelector:“.grid项”，
位置：正确，
columnWidth:“.grid sizer”，
排水沟：20，
错距：30
});
//加载每个图像后的布局
$grid.imagesLoaded（）.progress（函数（））{
$grid.mashine（）；
});
变量选项={
ValueName:['标记']，
页码：10，
分页：正确
/*插件：[
列表分页（{}）
]*/
};
var postslist=新列表（'posts'，选项）；
$（'.search'）。在（'input'，function（）上{
$grid.mashiness（'destroy'）；
$grid.mashine({
itemSelector:“.grid项”，
位置：正确，
columnWidth:“.grid sizer”，
排水沟：20，
错距：30
});
});
postslist.on（'updated'，function（））{
$（“.grid”）.append（“”）；
$grid.mashiness（'destroy'）；
$grid.mashine({
itemSelector:“.grid项”，
位置：正确，
columnWidth:“.grid sizer”，
排水沟：20，
错距：30
});
});

我希望必要时我能帮助别人

---

谢谢

这就是我搜索和分页时发生的情况：常规视图：搜索时：分页时：。对不起，我没有在问题中添加链接的名声。你可能想将答案作为单独的答案，然后接受它作为答案。对其他人来说更容易。好的@LuudvanKeulen。我会做的。@LuudvanKeulen完成了！：）