在我的页面右侧,我有一份赞助商名单。
我的活动页面区域(左侧)高度因页面而异,具体取决于每次都包含的故事。
我希望列表的高度与实际页面高度相匹配,所以我认为我总是会显示主要赞助商,而对于其他人,我会隐藏它们,并且每次都能显示尽可能多的赞助商
我的标记看起来像这样:
<div id="xorigoi">
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/1.png"></a>
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/2.png"></a>
<a class="basic"><img src="/views/images/adjustable/sideXorigoi/3.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/4.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/5.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/6.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/7.png"></a>
<a class="rest"><img src="/views/images/adjustable/sideXorigoi/8.png"></a>
</div>
每张图片都是指向每个赞助商网站的链接。每张图片都有自己的高度。
使用.rest
display: none
的元素
我正在尝试计算添加新图像是否会使列表长于页面,但由于隐藏了元素,因此offsetHeight = 0.
我该怎么办?
到目前为止,我的javascript / jquery代码如下所示:
$(
function(){
var containerHeight = $('#mainPageContainer')[0].offsetHeight; // total height of page
var xorigoi = $('#mainRightSide .rest'); // select the sponsors
var newHeight = 1062; // this is the right side height I am already using
$.each( xorigoi , function( index ){
if( newHeight + heightOfNewElement > containerHeight ){
return false; // break each
}
xorigoi.eq(index).css('display','block'); // display the sponsor
newHeight = newHeight + heightOfNewElement;
})
}
)
如此底线,如何在上面的函数中获得heightOfNewElement?
答案 0 :(得分:5)
由于JavaScript是单线程的,因此浏览器在执行时不会重绘。因此,您可以安全地将元素设置为display:block
,对其进行测量,然后再次隐藏它们,并且用户将更加明智。
答案 1 :(得分:1)
猜猜这会对你有帮助。
console.log(getDimensions($('#myElement')));
function getDimensions(element){
var tempElement = $(element).clone();
$(tempElement).css('display','block').css('visibility','hidden');
$(document.body).append(tempElement);
var obj = new Object();
obj.width = $(tempElement).width();
obj.height = $(tempElement).height();
$(tempElement).remove();
return obj;
}
答案 2 :(得分:1)
您可以考虑在视口外移动元素,而不是显示无。例如:
.rest {position:absolute;top:-9999px;}