0

在我的页面的右侧，我有一个赞助商列表。

我的活动页面区域（左侧）高度因页面而异，具体取决于它每次包含的故事。

我希望列表的高度与实时页面的高度相匹配，所以我想我总是会显示主要赞助商，而对于其余的赞助商，我会隐藏它们，并且每次都尽可能多地显示。

我的标记如下所示：

<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 ？

4

3 回答 3

5

由于 JavaScript 是单线程的，因此浏览器在执行时不会重绘。因此，您可以安全地将元素设置为display:block，测量它们，然后再次隐藏它们，用户将不会更聪明。

于 2012-11-29T04:33:14.447 回答
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;
}
于 2012-11-29T04:36:22.123 回答
1

您可以考虑将元素移到视口之外，而不是不显示。例如：

.rest {position:absolute;top:-9999px;}
于 2012-11-29T05:47:50.793 回答