问关于响应式设计的等高文章

EN

我将这个简单的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变量。检查完所有容器后，将触发一个函数，将所有元素的高度更改为最高高度。

这应该不会影响你的响应性，因为它不关心宽度或多少个单位在一行。更复杂的解决方案将只比较单行中的列，您可以通过查看父元素的宽度和容器的宽度来检查，然后在当前响应布局中划分以确定每行需要多少列，并从那里进行调整。

我希望这能给你一些方向。

我意识到处理javascripts的大多数解决方案都涉及到高度的变化。如果您查看site上的dom，您会发现在文章下面我们有另一个名为entry的元素。我试图制作等高的文章，但在查看代码后，我意识到我甚至可以制作相同高度的子元素。我从一篇文章转到另一篇文章，我的问题在一定程度上解决了。然后，偶尔重新调整大小，我又遇到了边际挤压问题。过了一段时间后，我意识到我的主题是使用masonry插件，这可能会导致问题/冲突。我删除了砖石和网站看起来更好。仍然需要完全测试不同的设备和不同的场景，以测试网站是否工作。

我想借此机会感谢@实践提供的努力和帮助。他提供的解决方案也将有效，但将为行中的所有元素提供最高高度。插件( https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows)在逐行的高度上工作，但更新站点的速度有点慢，并且会导致一些闪烁。