我正在做一个项目,我一起使用Listjs和Massible。我想要它,当我寻呼和搜索的东西砌体重新安排的项目。然而,这并没有发生。我在这里留下我的代码:
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>
1条答案
按热度按时间czfnxgou1#
经过几个小时的测试和调试,我找到了解决问题的方法。我不得不在搜索和分页中再次初始化砖石结构。但是我发现了另一个错误,当分页到div时消失了。我发现的解决方案是每当我更改页面时追加div。
JavaScript密码
我希望我能在必要的时候帮助别人
谢谢