Jquery 当数据超过div的高度时，在下一页显示动态数据

我正在使用html、jQuery做ipad应用程序。我正在获取json数据并显示为具有特定高度的html。我正在以固定高度568px显示容器中的所有数据。 现在的问题是，当数据增加时，它应该显示超出下一页中显示的容器高度的剩余数据。 如何做到这一点。任何帮助都将受到感谢

<div id="dataContainer"></div>

我正在使用jQuery动态地将数据附加到此div。。。 但当数据动态增加时，超过容器高度的数据必须添加到下一页

将json数据动态添加到html的代码：

$.getJSON("data.js", function (data) {
        $.each(data.posts, function (i, data) {
            var div_data = "<div class='fixed'><div class='left' style='background-image:url(" + data.image + ")'></div><div class='right'><div class='box'>" + data.name + "" + data.title + "" + data.bio.cleanup() + "</div></div></div>";
            $(div_data).appendTo("#dataContainer");
        });

$.getJSON（“data.js”，函数（数据）{
$.each（data.posts，function（i，data）{
var div_data=”“+data.name+“”+data.title+“”+data.bio.cleanup（）+“”；
$（div_数据）。附加到（“#数据容器”）；
});

接下来我要做的是使用以下代码将该数据划分为每页2个bio：

 $('#dataContainer').each(function () {
            var $imgs = $(this);
            var $children = $(this).children();
            var $chunks = chunk($children, 2);
            $.each($chunks, function (i) {
                i = i + 1;
                $('<div class="set" id="bio' + i + '" name=' + i + '>').append(this).appendTo($imgs);
            });

        });

        function chunk(arr, len) {
            var chunks = [],
                i = 0,
                n = arr.length;
            while (i < n) {
                chunks.push(arr.slice(i, i += len));
            }
            return chunks;
        }

$（“#数据容器”）。每个（函数（）{
var$imgs=$（本）；
var$children=$（this.children（）；
var$chunks=chunk（$children，2）；
$。每个（$块，函数（i）{
i=i+1；
$（''）.append（this.appendTo（$imgs）；
});
});
功能块（arr、len）{
var chunks=[]，
i=0，
n=阵列长度；
而（i

现在我想要的是，我不想分为每页2个条目…我想要的是显示与容器高度相关的条目…意味着如果2个条目适合该容器显示2，如果3个条目适合该容器，那么显示3…关于容器高度…如果我增加数据的大小，剩余的内容会更多超过容器高度将显示在下一页中

---

请帮助我。

请显示相关代码。！@RajaprabhuAravindasamy:我编辑了我的任务，我认为这与刷卡无关。这是划分块的方式。如果你想在下一个屏幕上显示，你需要限制显示的数量或字符，并为下一部分添加剩余的块。@u给出了一些idea、 .但如何实施呢？