具有流体宽度和高度的行中相等高度div（或li）（完成90％）

嘿所以我发现CSS-tricks Chris Coyier发布了这个甜蜜的jquery片段，它将div元素高度重置在页面上（位于同一行）与最高元素相同的位置。

问题此解决方案几乎适用于流体宽度布局，并在顶部位置更改时重置高度，但在页面首次加载时将其重置为行中当前最高元素的原始高度。 这是一个问题，因为自从这个页面首次加载以来，最高元素的高度可能已经改变了，因为使用了像ems这样的相对单位或者因为带有段落的自动换行。 建议的解决方案解决方案是将行的元素高度设置为最高元素的当前高度，而不是原始高度。 我没有成功完成这个。

以下是“li.half”是要比较和resize的元素的片段。

jQuery(document).ready(function($) { // these are (ruh-roh) globals. You could wrap in an // immediately-Invoked Function Expression (IIFE) if you wanted to... var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(); function setConformingHeight(el, newHeight) { // set the height to something new, but remember the original height in case things change el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"))); el.height(newHeight); } function getOriginalHeight(el) { // if the height has changed, send the originalHeight return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")); } function columnConform() { // find the tallest DIV in the row, and set the heights of all of the DIVs to match it. $('li.half').each(function() { // "caching" var $el = $(this); var topPosition = $el.position().top; if (currentRowStart != topPosition) { // we just came to a new row. Set all the heights on the completed row for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPosition; currentTallest = getOriginalHeight($el); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push($el); currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); } // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); }); } $(window).resize(function(){ columnConform(); }); // Dom Ready // You might also want to wait until window.onload if images are the things that // are unequalizing the blocks $(function() { columnConform(); }); }); 

如果你能弄清楚如何在窗口resize时调整setConformingHeight，请告诉我。

谢谢！

Answer 1

刚从Micah Godbolt的CodePen上找到它，它似乎正在起作用。 它是从Chris Aky借来的Chris Coyier借来的。 实际上，这个页面下的搜索结果是“逐行排列jquery等高”。

http://codepen.io/micahgodbolt/pen/FgqLc

Answer 2

这些解决方案在window.resize（）上不起作用，因为元素高度应该在计算新的实际高度之前用$ el.height（’auto’）解锁。

这是我的解决方案：

 var currentRowTop = -100, currentHighest= 0; $('.page-wrapper .cc').each(function() { $el=$(this); if($el.position().top!=currentRowTop){ equalizeHeight(); currentRowTop = $el.position().top; $el.height('auto').addClass('same-height'); currentHighest=$el.height(); }else{ $el.height('auto').addClass('same-height'); currentHighest = ($el.height()>currentHighest) ? $el.height() : currentHighest ; } }); equalizeHeight(); function equalizeHeight(){ if($('.same-height').size()==0) return; $('.same-height').height(currentHighest).removeClass('same-height'); }