jquery - 动态页面增长和流畅，在那？

Question

我还没有真正对动态页面做任何事情，所以我想知道真正的诀窍是什么。我设置了一个示例并为其提供了一些动态内容，但是让页面正确响应并顺利进行并不是我想的那样。

这是我目前拥有的 jQuery Controller

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);

这是为您更新的 fork :

http://jsfiddle.net/Rvm6L/

编辑:

好的，这是一个带有流畅动画的 jsfiddle。稍作花招，您就会想要清理 CSS 和 JavaScript。解决方案与我提出的没有什么不同，只是为您添加了一个小动画，它根据内容量与视口(viewport)之间的差异进行调整 (jQuery(window).height())

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

祝你好运!