我还没有真正对动态页面做任何事情,所以我想知道真正的诀窍是什么。我设置了一个示例并为其提供了一些动态内容,但是让页面正确响应并顺利进行并不是我想的那样。
这是我目前拥有的 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
最佳答案
只要您不为这些对象设置固定高度,就不需要使用 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 :
编辑:
好的,这是一个带有流畅动画的 jsfiddle。稍作花招,您就会想要清理 CSS 和 JavaScript。解决方案与我提出的没有什么不同,只是为您添加了一个小动画,它根据内容量与视口(viewport)之间的差异进行调整 (jQuery(window).height())
祝你好运!
关于jquery - 动态页面增长和流畅,在那?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23098547/