如何解决jquery+masonry瀑布流中分页导航浮动的问题

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://npmcdn.com/masonry-layout@4.0.0/dist/masonry.pkgd.min.js "></script>
<style>
.relative-container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.container {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto
 }
.box {
    width: 165px; /* 按照你需要调整宽度 */
    height: auto; /* 高度自适应 */
    margin: 5px; /* 添加边距 */
}
#pagination {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-top: 20px;
}
</style>
<div class="relative-container">
    <div id="container" class="container">
        <div class="box">
        <div class="pic"></div>
    </div>
    ......
        <div class="box">
        <div class="pic"></div>
    </div>
    </div>
    <div id="pagination">
        <?php echo $page->showPage(); ?>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
  $('#container').masonry({
    itemSelector: '.box',
    columnWidth: 30,
    isFitWidth: true
  });
});
</script>

用jquery和masonry构建的瀑布流，为什么分页导航

• 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：瀑布流排版-jquery.masonry.min.js使用说明

尤其是当我点下一页时，由于下一页的内容长度和这一页不一样，这时候分页条就会浮动在第二页的瀑布流内容上了。