关于响应式设计的等高文章行[关闭]答案

【问题标题】：Equal height rows of articles on responsive design [closed]关于响应式设计的等高文章行[关闭]
【发布时间】：2016-01-21 01:18:33
【问题描述】：

我正在尝试使用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 浏览器上的缩放事件。

【问题讨论】：

在 chrome 上，我没有遇到您显示的问题，而是标签足够长以增加行上的垂直高度，插件并没有增加容器的所有各自高度。如果您对这条路线感兴趣，我可以在 js/jQuery 中想到一些简单的方法来处理保持所有容器相同的高度，但没有花哨的动画。
插件正在增加行的高度，但不确定是否增加了边距。这个问题太严重了，我立即回滚了现场的东西，屏幕截图来自我的开发服务器。我尝试调试代码，似乎 js 正在做它应该做的事情，但不知何故，渲染引擎在高度改变后没有重新应用边距。知道浏览器是否在 js 更改后重新应用 css 或者渲染引擎的确切顺序是什么将会很有趣。我对所有不需要我添加任何额外的 css 标签或破坏站点上的响应式设计的解决方案持开放态度并继续工作所有设备。
如果您可以在开发环境中提供指向该站点的链接，可能会有所帮助，这样我们就可以看到您的确切实施中发生了什么。屏幕截图并没有告诉我们太多信息。
Dev env 在外部无法访问，因为 Internet 服务提供商不允许内部外部流量（我在从外部网络访问安全摄像头馈送时遇到问题）。请让我知道您何时想对此进行调查，我会看看我们是否可以使用 prod 映像启动另一个 azure 实例，仅用于测试。请让我知道什么时候可能是周末的好时光..
我整理了一个简单的 js/jQuery 解决方案，应该会有所帮助。展望未来，一般来说，我将我的开发环境放在生产服务器上的单独虚拟主机上，以便所有相同的服务器配置都在发挥作用，并且我能够与客户端共享开发环境以进行远程审查（我只远程工作） .一个简单的 http auth u/p 可以阻止不受欢迎的查看者（包括搜索引擎）。只是一个想法。

标签： javascript ios css responsive-design screen-rotation

【解决方案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 变量。一旦检查了所有容器，就会触发一个函数以将所有元素高度更改为最高。

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

我希望这有助于给你一些方向。

【讨论】：

【解决方案2】：

我意识到大多数处理 javascripts 的解决方案都涉及高度的变化。如果您查看现场的 dom，您会发现在 article 下我们还有另一个名为 entry 的元素。我试图制作相同高度的文章，但在查看代码后我意识到我什至可以制作相同高度的子元素。我从文章切换到条目，我的问题在一定程度上解决了。然后偶尔重新调整大小，我再次遇到边缘挤压问题。一段时间后意识到我的主题是使用砌体插件，这可能是导致问题/冲突的原因。我拆除了砖石，场地看起来更好。仍然需要在不同的设备和不同的场景上进行全面测试，以测试站点是否有效。

想借此机会感谢@practical 提供的努力和帮助。他提供的解决方案也将起作用，但将为跨行的所有元素提供最高高度。该插件（https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows）适用于行高，但更新站点的速度有点慢，并且会导致一些闪烁。

【讨论】：