在响应式设计上相同高度的文章行

Question

我正在尝试使用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。

Answer 1

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

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

我希望这有助于你找到方向。

Answer 2

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

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