javascript - 响应式设计 - 使用 javascript 和 css(flex 和媒体查询)更改布局

Question

请看http://jsfiddle.net/mrcjcfe7/19/用于工作布局。

我有 3 列(COL1、COL2 和 COL3)，我需要根据屏幕宽度重新排列。不同之处在于，当屏幕在 300-600 像素之间时，我需要将 COL3 置于 COL2 之下。在 300px 以下，我需要显示 COL2、COL3 和 COL1。

当调整屏幕大小时，CSS 和 Javascript 的组合完成了这项工作。

var col1 = document.getElementById('col1'),
    col2 = document.getElementById('col2'),
    swapped = false;

window.onresize = function () {
    var width = window.innerWidth;
    if (width < 300 && swapped === false) {
        swapCols();
        swapped = true;
    } else if (width > 300 && swapped === true) {
        swapCols();
        swapped = false;
    }
};

function swapCols() {
    var _col1 = col1.innerHTML,
        _col1id = col1.id,
        _col2 = col2.innerHTML,
        _col2id = col2.id;
    col1.innerHTML = _col2;
    col1.id = _col2id;
    col2.innerHTML = _col1;
    col2.id = _col1id;
}

html * {
    margin:0;
    padding:0;
}
body {
    background:#000;
    font-family:helvetica, verdana;
}
#wrapper {
    width:600px;
}
#col1 {
    float:left;
    width:200px;
    background:#cc4444;
}
#col2 {
    float:left;
    width:200px;
    background:#44cc44;
}
#col3 {
    float:left;
    width:200px;
    background:#4444cc;
}
.clear {
    clear:both;
}
@media only screen and (min-width:300px) and (max-width:600px) {
    #col3 {
        float:none;
    }
}
@media only screen and (max-width:300px) {
    #wrapper {
        width:100%;
    }
    #col1, #col2, #col3 {
        float:none;
        width:100%;
    }
}

<div id="wrapper">
    <div id="col1" class="cols">COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 -</div>
    <div id="col2" class="cols">COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 -</div>
    <div id="col3" class="cols">COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 -</div>
    <div class="clear"></div>
</div>

我遇到的问题是 COL2 包含的内容比 COL1 多。 COL3 占据了我想要的位置，但在 COL2 旁边有一个空隙。编辑:请查看本文末尾的图片。

当屏幕在 300-600px 之间并且第二列包含的内容比第一列更多时，如何实现没有间隙的所需布局？

谢谢，

塞巴斯蒂安

编辑 Here is an image showing the correct layout and the problem I attempt to solve

Answer 1

谢谢大家的帮助。我终于找到了适合这个 3 列响应式布局的东西。

我现在使用 flex用于组合 javascript 的基础布局解决原来的问题。

1. 当没有足够的空间时，第三列用flex-flow 换到第一列下面。 : 换行;.

2. 当第一列包含的内容少于第二列时(我原来的问题)，我使用 javascript swap 第三列与第一列底部的空 div。这样，当第三列换行时，第一列下方没有间隙。

3. 最后，我使用 media-queries与 flex order 当列在另一列之上时将第二列放在第一个位置。

这是一个工作示例。 运行代码片段时请注意:您必须缩小浏览器的宽度才能看到列调整。

var col1 = document.getElementById('sc1'),
    col2 = document.getElementById('c3'),
    swapped = false;

window.onresize = function () {
    detectSwap();
};

window.onload = function () {
    detectSwap();
};

function detectSwap() {
    var width = window.innerWidth;
    if (width <= 599 && swapped === false) {
        swapCols();
        swapped = true;
    } else if (width > 599 && swapped === true) {
        swapCols();
        swapped = false;
    }
}

function swapCols() {
    var _col1 = col1.innerHTML,
        _col1id = col1.id,
        _col2 = col2.innerHTML,
        _col2id = col2.id;
    col1.innerHTML = _col2;
    col1.id = _col2id;
    col2.innerHTML = _col1;
    col2.id = _col1id;
}

html * {
    margin:0;
    padding:0;
}
.flex-container {
    display: flex;
    flex-flow: row wrap;
}
.cols {
    width: 200px;
}
#c1 {
    background:#cc4444;
}
#c2 {
    background:#44cc44;
}
#c3 {
    background:#4444cc;
}
@media only screen and (max-width:400px) {
    #c1 {
        order: 2;
    }
    #c2 {
        order: -1;
    }
    #c3 {
        order: 3;
    }
}

<div class="flex-container">
    <div id="c1" class="cols">COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 -
        <div id="sc1"></div>
    </div>
    <div id="c2" class="cols">COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 -</div>
    <div id="c3" class="cols">COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 -COL 3 - COL 3 - COL 3</div>
</div>