使用jQuery为div设置相等的高度 [英] Setting equal heights for div's with jQuery
问题描述
我想用jQuery为div设置相同的高度。
所有div可能有不同数量的内容和不同的默认高度。以下是我的html布局示例：
< div class =container>
< div class =column>这是< br />最高的< br />栏< / div>
< div class =column>一行< / div>
< div class =column>两个< br />行< / div>
< / div>
< div class =container>
< div class =column>一行< / div>
< div class =column>两个< br>行< / div>
< div class =column>一行< / div>
< / div>
我使用下一个jQuery函数设置高度：
$（document）.ready（function（）{
var highestBox = 0;
$（'。container .column '）.each（function（）{
if（$（this）.height（）> highestBox）{
highestBox = $（this）.height（）;
}
$ b $（'。container .column'）。height（highestBox）;
}）;
这个工作正常，但并不适用于我的情况，因为我希望所有'列'容器'。这意味着在第一个容器中，所有的框必须与第一个div一样高，但在第二个容器中它们必须等于第二个列。
所以问题是 - 我应该如何修改我的jQuery来达到这个目的？谢谢！
- 遍历每个容器
- 获取每列的高度该容器
- 找到最高的一个
- 将这个高度应用于该容器中的每个列，然后再转到下一个列。 b
b
$ b
注意：尝试提供一个示例jsfiddle，使我们
更容易帮助您并理解问题，您可以立即看到
的工作解决方案，并鼓励quic
快速（粗糙）示例
< pre-class =snippet-code-js lang-js prettyprint-override>$（document）.ready（function（）{//选择并循环要平衡元素的容器元素$ （'.container'）。each（function（）{//缓存最高的var highestBox = 0; //选择并循环要平衡的元素$（'。column'，this）.each（function（）{//如果此框高于缓存的最高值，则存储它（if（$（this）.height ）> highestBox）{highestBox = $（this）.height（）;}}）; //将所有这些孩子的高度设置为最高的$（'。column'，this）.height（highestBox）; }）; };.container {border 1px solid red; } .column {border：1px纯蓝色;向左飘浮;宽度：30％;文本对齐：中心; }< script src =https：// ajax .googleapis.com / ajax / libs / jquery / 1.9.1 / jquery.min.js>< / script>< div class =container> < div class =column>这是< br />最高的< br />栏< / div> < div class =column>一行< / div> < div class =column>两个< br />行< / div>< / div>< div class =container> < div class =column>一行< / div> < div class =column>两个< br>行< / div> < div class =column>一行< / div>< / div>b
图书馆！
$ b下面是我发现的一个图书馆，如果你想要更多的
聪明的均衡控制，看起来很有希望
http://brm.io/jquery-match-height-demo/ blockquote>
解决@ Mem的问题
$ b $
问题：将
$（document）.ready（）工作如果您的图片需要加载，然后修改容器的高度？
图片加载后均衡高度 如果您要加载图片，您会发现此解决方案不会总是工作。这是因为 当图片最终加载时，它们可能会在均衡脚本运行后扭曲它们的容器高度，导致它看起来不太适用。 用图像解决均衡高度 这是最好的解决方案（写作时）并涉及绑定到 这里是 如果加载大多数的外部异步，并与最小化，压缩和传播的负载，你可能不会有任何问题，这种方法聪明，但突然慢CDN（总是发生）可能会导致问题。 在这两种情况下，您都可以采取愚蠢的方法并应用回退计时器。让平衡脚本在设定的几秒钟后自动运行，以防止事件没有触发或某些事情慢慢失控。这并不是一种愚蠢的行为，但实际上，如果您正确调整计时器，您就可以满足99％的访问者的需求。 I want to set equal height for divs with jQuery.
All the divs may have different amount of content and different default height. Here is a sample of my html layout: I'm setting the height with the next jQuery function: This works fine but not in my case because I want all the 'columns' equal only inside one 'container'. This means that in the first container all the boxes must be as high as the first div, but in the second one they must be equal to second column. So question is -- how should I modify my jQuery to reach this? Thank you! Answer to your specific question Your code was checking all columns within any container, what you need to do is:
document.ready 会在最早的时间被触发，这意味着它不会等待外部资源被加载（比如图片）。
img.load 事件。所有你需要做的是计算有多少img有 $（'img'）。length ，然后为每个加载， -1 ，直到你达到零，然后触发均衡器。
load 如果图像在缓存中，可能无法在所有浏览器中触发。看看谷歌/ github，应该有一个解决方案脚本。在撰写本文时，我发现亚历山大迪克森的waitForImages （未经测试，这不是一种认可）。
window.load 事件。这通常应该始终有效。但是，如果您查看文档，我们会注意到这个事件在所有外部资源被加载后触发。这意味着如果你的图像被加载，但有一些JavaScript等待下载，它将不会触发，直到完成。
<div class="container">
<div class="column">This is<br />the highest<br />column</div>
<div class="column">One line</div>
<div class="column">Two<br />lines</div>
</div>
<div class="container">
<div class="column">One line</div>
<div class="column">Two<br>lines</div>
<div class="column">One line</div>
</div>
$(document).ready(function(){
var highestBox = 0;
$('.container .column').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$('.container .column').height(highestBox);
});
Note: Try to provide an example jsfiddle of your issue, it enables us to more easily help you and understand the issue, you get to see the working solution straight away and it encourages quicker responses.
Quick (Rough) Example
$(document).ready(function(){
// Select and loop the container element of the elements you want to equalise
$('.container').each(function(){
// Cache the highest
var highestBox = 0;
// Select and loop the elements you want to equalise
$('.column', this).each(function(){
// If this box is higher than the cached highest then store it
if($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
// Set the height of all those children to whichever was highest
$('.column',this).height(highestBox);
});
});
.container { border 1px solid red; }
.column { border: 1px solid blue; float:left; width: 30%; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="column">This is<br />the highest<br />column</div>
<div class="column">One line</div>
<div class="column">Two<br />lines</div>
</div>
<div class="container">
<div class="column">One line</div>
<div class="column">Two<br>lines</div>
<div class="column">One line</div>
</div>
Library!
Here's a library i found that looks promising if you want some more clever equalisation controls
Addressing @Mem's question
Question: Will
$(document).ready()work if you have images that need to load which in turn modify the heights of the containers?
Equalising heights after image load
If you are loading images, you will find that this solution doesn't always work. This is because document.ready is fired at the earliest possible time, which means it does not wait for external resources to be loaded in (such as images).
When your images finally load, they may distort the heights of their containers after the equalisation script has run, causing it too appear not too work.
Solving equalising heights with images
- Bind to image loading events
This is the best solution (at the time of writing) and involves binding to the img.load event. All you have to do is get a count of how many img's there are $('img').length and then for each load, -1 from that count until you hit zero, then fire the equaliser.
The caveat here is load may not fire in all browsers if the image is in the cache. Look around google/github, there should be a solution script out there. At the time of writing i found waitForImages from Alexander Dickson (untested, this is not an endorsement).
- Another more reliable solution is the
window.loadevent. This should generally always work. However, if you check the docs out, you'll notice this event fires after ALL external resources are loaded. This means if your images are loaded but there's some javascript waiting to download it won't fire until that completes.
If you load the majority of your externals asyncronously and are clever with minimising, compressing and spreading the load you probably wont have any issues with this method, however a suddenly slow CDN (happens all the time) could cause issues.
In both cases, you could take a dumb approach and apply fallback timers. Have the equalise script run automatically after a set few seconds just in case the event doesn't fire or something is slow out of your control. It's not fool proof, but in reality you'll satisfy 99% of your visitors with this fallback if you tune the timer correctly.
这篇关于使用jQuery为div设置相等的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
