动态页面增长顺畅，在那？

Question

我还没有做过任何关于动态页面的事情，所以我想知道真正的伎俩是什么。我设置了一个示例并给它一些动态内容，但是让页面正确响应，并且顺利进行并不是我想象的那样。

这是我目前用于jQuery控制器的内容

var container = $('#container'),
    heightOrig = $(document).height(),
    contHeightOrig = container.height(),
    limit = 8,
    current = 0;

$('.current').html( heightOrig + 'px' );

var end = setInterval(function() {

    if ( current === limit ) {
        if ( contHeightOrig != container.height() ) {
            container.height($(document).height());
        }
        clearInterval( end );
    }

    var height = $(document).height(),
        newEnd = $('.offset:last-child'),
        appendNew = '<div class="offset"><p class="adjustment">HTML at ' + height + 'px</p></div>';

    if ( contHeightOrig != container.height() ) {
        container.height($(document).height());
    }

    newEnd.after(appendNew);

    current++;

}, 1000);

显然，现在显示的内容只是一个简单的附加内容，因为我试图了解其功能。

JSFiddle Example

Answer 1

只要没有为这些对象设置固定高度，就不需要使用javascript调整页面高度或容器。随着您添加更多内容，其高度将自动调整。

修改CSS

html, body { margin: 0; padding: 0; }
body > #container { min-height: 100%; }
#content { padding-bottom: 100px; }
#footer { clear: both; position: relative; z-index: 10; height: 100px; margin-top: 0; }

修改JS

var container = $('#container'),
heightOrig = $(document).height(),
contHeightOrig = container.height(),
limit = 8,
current = 0;

$('.current').html( heightOrig + 'px' );

var end = setInterval(function() {

    if ( current === limit ) {
        //if ( contHeightOrig != container.height() ) {
        //    container.height($(document).height()-100);
        //}
        clearInterval( end );
    }

    var height = $(document).height(),
        newEnd = $('.offset:last-child'),
        appendNew = '<div class="offset"><p class="adjustment">HTML at ' + height + 'px</p></div>';

    //if ( contHeightOrig != container.height() ) {
        //container.height($(document).height()-100);
    //}

    newEnd.after(appendNew);

    current++;

    }, 1000);

这是一个更新的分叉：

http://jsfiddle.net/Rvm6L/

编辑：

好的，这是一个带有平滑动画的jsfiddle。进行了一些尝试，你将要清理CSS和JavaScript。解决方案与我提出的解决方案没有什么不同，只是为您添加了一个基于内容量与视口之间的差异进行调整的动画（jQuery（window）.height（））

http://jsfiddle.net/Rvm6L/2/

祝你好运！