javascript - 按优先顺序响应的两列面板布局

Question

我一直在研究一种在主页上显示面板的方法，该页面是响应式的，开始时所有面板都是 100% 宽并堆叠，然后在某个断点处面板将分成两列。

我正在进行的工作在这里 http://codepen.io/charge-valtech/pen/aIEGf

这与按优先顺序从左到右流动的面板配合得很好。然而问题是这个页面需要是动态的，所以任何面板都可以“关闭”。因此，如果您摆脱了第三个面板，由于 float 的工作方式，第四个面板会尝试向右移动，即使已指定 float: left。

使用空地会使它保持在左边，但是第三个面板所在的地方会有一个空隙......

我希望这是有道理的，我只是对其他人如何解决这个问题感兴趣。我在想 JavaScript 可能是要走的路，但我真的不知道如何去检测是否有可用的空白区域。

干杯

Answer 1

我想我会为此分享我的解决方案，因为砌体对此有点矫枉过正，并且没有像我希望的那样干净利落。

我的 css left-widget 和 right-widget 中有两个类，然后使用网格系统设置它们的宽度和 float ，这基本上使它们向左浮动和向右浮动以及 49.something% 宽度。

默认情况下，我为所有小部件提供 left-widget 类，然后使用一些 jquery，我这样做:

$('.left-widget').each(function (index, value) {
                var widgetPosition = $(this).position().left;
                if (widgetPosition >= 30) {
                    $(this).removeClass('left-widget').addClass('right-widget');
                }
            });
            $('.right-widget').each(function (index, value) {
                var widgetPosition = $(this).position().left;
                if (widgetPosition <= 30) {
                    $(this).removeClass('right-widget').addClass('left-widget');
                }
            });

现在这完全符合我的要求，如果小部件适合，则将它们粘在右边。