Javascript 在不同容器中重新排序html元素_Javascript_Html_Jquery_Css_Responsive

Javascript 在不同容器中重新排序html元素

javascript html jquery css

Javascript 在不同容器中重新排序html元素,javascript,html,jquery,css,responsive,Javascript,Html,Jquery,Css,Responsive,我试图按照特定的逻辑对我的项目重新排序，但无法使用css网格完成。我有这个html结构： <div class="multi-column-row"> <div class="row"> <div>ITEM 1</div> <div>ITEM 2</div> <div>ITEM 3</div> </div> <div

我试图按照特定的逻辑对我的项目重新排序，但无法使用css网格完成。我有这个html结构：

<div class="multi-column-row">
<div class="row">
    <div>ITEM 1</div>
    <div>ITEM 2</div>
    <div>ITEM 3</div>
</div>
<div class="row">
    <div>ITEM 4</div>
    <div>ITEM 5</div>
    <div>ITEM 6</div>
</div>
<div class="row">
    <div>ITEM 7</div>
    <div>ITEM 8</div>
    <div>ITEM 9</div>
</div>
</div>

现在，我想在移动设备上实现以下目标：当行垂直显示时：

ITEM 1
ITEM 4
ITEM 7
ITEM 2
ITEM 5
ITEM 8
ITEM 3
ITEM 6
ITEM 9

而且，即使在柱状物中含有更多矿石，它也必须起作用。在你问我为什么不直接按这个顺序放置这些项目，并且有三行，每行三列：因为在桌面上，我需要三列，里面有多个项目，就像一个砖石网格

我非常感谢您提供的一切帮助，即使是javascript解决方案也可以对dom元素进行重新排序

您可以添加媒体查询

使用“显示为内联”和“内联块”可以更改。此外，如果将媒体查询添加到逻辑中，则布局将根据屏幕宽度进行更改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (max-width: 480px)  {
            .row {
                display: inline;
            }
        }
        @media screen and (min-width: 480px)  {
            .row {
                display: inline-block;
            }
        }
    </style>
</head>
<body>
    <div class="multi-column-row">
        <div class="row">
            <div>ITEM 1</div>
            <div>ITEM 2</div>
            <div>ITEM 3</div>
        </div>
        <div class="row">
            <div>ITEM 4</div>
            <div>ITEM 5</div>
            <div>ITEM 6</div>
        </div>
        <div class="row">
            <div>ITEM 7</div>
            <div>ITEM 8</div>
            <div>ITEM 9</div>
        </div>
    </div>
</body>
</html>

这个答案不能很好地扩展，但是可以使用flexbox和display:contents，然后对.row div的内容进行排序

.多列行{ 显示器：flex；弯曲方向：立柱； } .多列行.行{ 显示：内容； } .多列行。行：n-child1{ 顺序：1； } .多列行。行：n-child2{ 顺序：2； } .多列行。行：n-child3{ 顺序：3； } 项目1 项目2 项目3 项目4 项目5 项目6 项目7 项目8 项目9

您的移动显示示例重复了第3项。我认为这是个错误。我想一定是第二项

在我的示例中，删除行类，然后通过媒体查询对元素进行排序

我将所有逻辑包装在onresize事件中。这样做是为了直观地了解更改浏览器窗口时的操作原理。在生产中，它需要替换为窗口onload事件。就像这样：

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

js中的逻辑是从屏幕的767像素触发的

这样的结果有必要吗

window.onresize=函数{ 让媒体=窗口。匹配媒体最小宽度：767px；让unwrap_div=document.queryselectoral'.multi-column row.row'；如果媒体匹配{ 展开分区foreach函数展开分区当前{ unwrap_div_curr.outerHTML=unwrap_div_curr.innerHTML； } }else{} } .多列行{ 显示器：flex；弯曲方向：立柱； } @介质最大宽度：767px{ .多列行div:n-child1{ 顺序：1； } .多列行div:nth-child2{ 订单：7份； } .多列行div:nth-child3{ 顺序：4； } .多列行div:nth-child4{ 顺序：2； } .多列行div:nth-child5{ 顺序：5； } .多列行div:nth-child6{ 订单：8份； } .多列行div:nth-child7{ 顺序：3； } .多列行div:nth-child8{ 顺序：6； } .多列行div:nth-child9{ 顺序：9； } } 项目1 项目2 项目3 项目4 项目5 项目6 项目7 项目8 项目9

这里只有js会有帮助。@sergeykuznetsov你能帮我使用js解决方案吗？是的，我可以，而且它必须工作，即使它们在->列中是更多或更少的项目，如果第一列中有2个元素，第二列中有5个元素，它应该如何工作？你需要定义一个明确的行为你问的是错误的应该是项目1项目4项目7项目2项目5项目8项目3项目6项目9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (max-width: 480px)  {
            .row {
                display: inline;
            }
        }
        @media screen and (min-width: 480px)  {
            .row {
                display: inline-block;
            }
        }
    </style>
</head>
<body>
    <div class="multi-column-row">
        <div class="row">
            <div>ITEM 1</div>
            <div>ITEM 2</div>
            <div>ITEM 3</div>
        </div>
        <div class="row">
            <div>ITEM 4</div>
            <div>ITEM 5</div>
            <div>ITEM 6</div>
        </div>
        <div class="row">
            <div>ITEM 7</div>
            <div>ITEM 8</div>
            <div>ITEM 9</div>
        </div>
    </div>
</body>
</html>

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