Javascript 如何根据jquery中的容器高度分页

如何根据jquery中的容器高度自动分页。 我想根据div高度进行分页，我添加了一个示例，但这是在angularjs上进行的。有人能帮我用jquery代替angularjs吗

<div class="content" id="main_content">
    <p>Text 1</p>
    <p>Text 2</p>
    <p>Text 3</p>
    <p>Text 4</p>
    <p>Text 5</p>
    <p>Text 6</p>
    <p>Text 7</p>
</div>

文本1

文本2

文本3

文本4

文本5

文本6

文本7

---

想把以前的代码做成这样，但是使用jquery。

高度是用css设置的吗？实际上高度不能是任何东西，它不是固定的，基本上我需要它来进行响应性设计。谢谢