Question

我正在使用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");
        });

接下来我正在使用此代码将此数据划分为每个页面的2个生物：

 $('#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;
        }

现在我想要的是我不希望每页有2个条目...我想要的是显示与容器高度相关的条目...表示2个条目是否适合该变容器显示2，如果3适合然后显示3 ...相对于容器的高度...如果我增加数据的大小，剩余的超过容器高度的内容将显示在下一页

请帮帮我。

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

0 个答案: