<分区>
javascript - 响应式设计文章的等高行
我正在尝试使用 https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows Java 脚本插件可在我的响应式网格文章行上实现相等的行高 http://www.snapchamp.com .该插件可以正常渲染某些页面，但在某些情况下，它会弄乱元素之间的边距，如下所示:
当我缩放浏览器窗口以及当我转动 ipad 或移动设备的方向时，插件会失败。在移动设备中，即使使用单个元素网格，边距也会变得困惑。
所以我的问题是:
1)有没有更好的js插件达到更好的效果？喜欢http://brm.io/jquery-match-height/或者你过去用过的其他东西。
2) 页面 css 渲染和 javascript 执行的顺序是什么？出现此类网格边距问题的原因可能是什么？
3) 我尝试在浏览器上搜索缩放事件，答案几乎是 3-5 年前的。想知道我们是否有任何新事件通知 javascript 浏览器上的缩放事件。
最佳答案
我将这段简单的 js/jQuery 放在一起，供您用作解决方案。 fiddle .
jQuery(document).ready(function(){
//Find max height:
var maxH = 0;
var containers = jQuery("div.container");
var i = 0;
containers.each(function() {
var h = jQuery(this).height();
if(h > maxH)
maxH = h;
i += 1;
if(i == containers.length)
updateContainerHeight();
});
function updateContainerHeight()
{
if(typeof maxH == 'undefined' || typeof maxH == 'null')
return;
containers.css({'height': maxH + 'px'});
}
});
它所做的是遍历所有容器元素，测量它们，如果当前元素高于先前最高的元素，它会替换 maxH 变量。一旦检查了所有容器，就会触发一个函数来将所有元素的高度更改为最高。
这不应该影响您的响应，因为它不关心宽度或一行中有多少个单位。一个更复杂的解决方案只会比较单行中的那些，您可以通过查看父元素的宽度和容器的宽度来检查，然后划分以确定在当前响应式布局中每行需要多少列和从那里调整。
我希望这对您有所帮助。
关于javascript - 响应式设计文章的等高行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33269550/